Merge branch 'features/mild-master' into 3.1.0rc2
This commit is contained in:
GitHub
commit
4a6cadc80a
2
Gemfile
2
Gemfile
@ -104,6 +104,8 @@ gem 'json-ld'
|
||||
gem 'json-ld-preloaded', '~> 3.0'
|
||||
gem 'rdf-normalize', '~> 0.4'
|
||||
|
||||
gem 'redcarpet', "~> 3.4.0"
|
||||
|
||||
group :development, :test do
|
||||
gem 'fabrication', '~> 2.21'
|
||||
gem 'fuubar', '~> 2.5'
|
||||
|
||||
@ -492,6 +492,7 @@ GEM
|
||||
link_header (~> 0.0, >= 0.0.8)
|
||||
rdf-normalize (0.4.0)
|
||||
rdf (~> 3.1)
|
||||
redcarpet (3.4.0)
|
||||
redis (4.1.3)
|
||||
redis-actionpack (5.0.2)
|
||||
actionpack (>= 4.0, < 6)
|
||||
@ -757,6 +758,7 @@ DEPENDENCIES
|
||||
rails-i18n (~> 5.1)
|
||||
rails-settings-cached (~> 0.6)
|
||||
rdf-normalize (~> 0.4)
|
||||
redcarpet (~> 3.4.0)
|
||||
redis (~> 4.1)
|
||||
redis-namespace (~> 1.7)
|
||||
redis-rails (~> 5.0)
|
||||
|
||||
71
app/javascript/mastodon/actions/UtilBtns.js
Normal file
71
app/javascript/mastodon/actions/UtilBtns.js
Normal file
@ -0,0 +1,71 @@
|
||||
import { changeCompose } from '../actions/compose';
|
||||
|
||||
|
||||
|
||||
export const UTILBTNS_GOJI = 'UTILBTNS_GOJI';
|
||||
export const UTILBTNS_HARUKIN = 'UTILBTNS_HARUKIN';
|
||||
|
||||
|
||||
|
||||
export function submitGoji (textarea) {
|
||||
return function (dispatch, getState) {
|
||||
if (!textarea.value) {
|
||||
let text = [
|
||||
"#ゴジモリｨｨィィイイ",
|
||||
":goji:"
|
||||
].join("\r\n");
|
||||
|
||||
dispatch(submitGojiRequest());
|
||||
dispatch(changeCompose(text));
|
||||
|
||||
textarea.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function submitGojiRequest () {
|
||||
return {
|
||||
type: UTILBTNS_GOJI
|
||||
}
|
||||
}
|
||||
|
||||
export function submitHarukin (textarea) {
|
||||
return function (dispatch, getState) {
|
||||
const HARUKINS = [":harukin: ", ":harukin_old: ", ":harukin_ika: ", ":harukin_tako: "];
|
||||
const MAX = 6;
|
||||
|
||||
if (!textarea.value) {
|
||||
let text = "";
|
||||
|
||||
let quantity = Math.round(Math.random() * MAX + 1);
|
||||
let type = Math.round(Math.random() * (HARUKINS.length - 1));
|
||||
|
||||
let harukin = HARUKINS[type];
|
||||
|
||||
switch (quantity) {
|
||||
default:
|
||||
text = [
|
||||
harukin.repeat(quantity),
|
||||
"🔥 ".repeat(quantity)
|
||||
].join("\r\n");
|
||||
|
||||
break;
|
||||
|
||||
case MAX + 1:
|
||||
text = `${harukin}💕\r\n`.repeat(6);
|
||||
break;
|
||||
}
|
||||
|
||||
dispatch(submitHarukinRequest());
|
||||
dispatch(changeCompose(text));
|
||||
|
||||
textarea.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function submitHarukinRequest () {
|
||||
return {
|
||||
type: UTILBTNS_HARUKIN
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import Motion from 'react-motion/lib/Motion';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class IconButton extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
size: PropTypes.number,
|
||||
active: PropTypes.bool,
|
||||
style: PropTypes.object,
|
||||
activeStyle: PropTypes.object,
|
||||
disabled: PropTypes.bool,
|
||||
inverted: PropTypes.bool,
|
||||
animate: PropTypes.bool,
|
||||
overlay: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
size: 18,
|
||||
active: false,
|
||||
disabled: false,
|
||||
animate: false,
|
||||
overlay: false,
|
||||
};
|
||||
|
||||
handleClick = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!this.props.disabled) {
|
||||
this.props.onClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const style = {
|
||||
fontSize: `${this.props.size}px`,
|
||||
width: `${this.props.size * 1.28571429}px`,
|
||||
height: `${this.props.size * 1.28571429}px`,
|
||||
lineHeight: `${this.props.size}px`,
|
||||
...this.props.style,
|
||||
...(this.props.active ? this.props.activeStyle : {}),
|
||||
};
|
||||
|
||||
const classes = ['icon-button'];
|
||||
|
||||
if (this.props.active) {
|
||||
classes.push('active');
|
||||
}
|
||||
|
||||
if (this.props.disabled) {
|
||||
classes.push('disabled');
|
||||
}
|
||||
|
||||
if (this.props.inverted) {
|
||||
classes.push('inverted');
|
||||
}
|
||||
|
||||
if (this.props.overlay) {
|
||||
classes.push('overlayed');
|
||||
}
|
||||
|
||||
if (this.props.className) {
|
||||
classes.push(this.props.className);
|
||||
}
|
||||
|
||||
return (
|
||||
<Motion defaultStyle={{ rotate: this.props.active ? 180 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? 0 : 180) : 0 }}>
|
||||
{({ rotate }) =>
|
||||
<button
|
||||
aria-label={this.props.title}
|
||||
title={this.props.title}
|
||||
className={classes.join(' ')}
|
||||
onClick={this.handleClick}
|
||||
style={style}
|
||||
>
|
||||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
|
||||
</button>
|
||||
}
|
||||
</Motion>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default IconButton;
|
||||
@ -129,6 +129,14 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
handleBookmarkClick = () => {
|
||||
this.props.onBookmark(this.props.status);
|
||||
}
|
||||
|
||||
handleReblogClick = (e) => {
|
||||
this.props.onReblog(this.props.status, e);
|
||||
}
|
||||
|
||||
_openInteractionDialog = type => {
|
||||
window.open(`/interact/${this.props.status.get('id')}?type=${type}`, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
|
||||
}
|
||||
@ -329,6 +337,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
<IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||
{shareButton}
|
||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
|
||||
|
||||
<div className='status__action-bar-dropdown'>
|
||||
<DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} />
|
||||
|
||||
@ -0,0 +1,127 @@
|
||||
import React from 'react';
|
||||
import Immutable from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link from 'react-router-dom/Link';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import IconButton from '../../../components/announcement_icon_button';
|
||||
import Motion from 'react-motion/lib/Motion';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
|
||||
const Collapsable = ({ fullHeight, minHeight, isVisible, children }) => (
|
||||
<Motion defaultStyle={{ height: isVisible ? fullHeight : minHeight }} style={{ height: spring(!isVisible ? minHeight : fullHeight) }}>
|
||||
{({ height }) =>
|
||||
<div style={{ height: `${height}px`, overflow: 'hidden' }}>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
</Motion>
|
||||
);
|
||||
|
||||
Collapsable.propTypes = {
|
||||
fullHeight: PropTypes.number.isRequired,
|
||||
minHeight: PropTypes.number.isRequired,
|
||||
isVisible: PropTypes.bool.isRequired,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
welcome: { id: 'welcome.message', defaultMessage: '{domain}へようこそ!' },
|
||||
markdown: { id: 'markdown.list', defaultMessage: 'markdown一覧' },
|
||||
});
|
||||
|
||||
const hashtags = Immutable.fromJS([
|
||||
'神崎ドン自己紹介',
|
||||
]);
|
||||
|
||||
class Announcements extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
homeSize: PropTypes.number,
|
||||
isLoading: PropTypes.bool,
|
||||
};
|
||||
|
||||
state = {
|
||||
showId: null,
|
||||
isLoaded: false,
|
||||
};
|
||||
|
||||
onClick = (announcementId, currentState) => {
|
||||
this.setState({ showId: currentState.showId === announcementId ? null : announcementId });
|
||||
}
|
||||
nl2br (text) {
|
||||
return text.split(/(\n)/g).map((line, i) => {
|
||||
if (line.match(/(\n)/g)) {
|
||||
return React.createElement('br', { key: i });
|
||||
}
|
||||
return line;
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl } = this.props;
|
||||
|
||||
return (
|
||||
<ul className='announcements'>
|
||||
<li>
|
||||
<Collapsable isVisible={this.state.showId === 'markdown'} fullHeight={1240} minHeight={20} >
|
||||
<div className='announcements__body'>
|
||||
<p>{ this.nl2br(intl.formatMessage(messages.markdown, { domain: document.title }))}<br />
|
||||
<br />
|
||||
(半角)は半角スペースを入力する必要がある場所です。(半角)だけの列は半角スペースのみが入力された列が必要であるを指します。<br /><br />
|
||||
〜〜〜〜〜〜見出し〜〜〜〜〜〜<br /><br />
|
||||
#(半角)見出しテキスト<br /><br />
|
||||
#は1〜6個重ねることができます。<br /><br />
|
||||
〜〜〜〜コードブロック〜〜〜〜<br /><br />
|
||||
`コード`<br /><br />
|
||||
〜〜〜〜〜〜引用〜〜〜〜〜〜<br /><br />
|
||||
>引用文<br />
|
||||
(半角)<br />
|
||||
ここから先は引用が切れます<br />
|
||||
引用は複数回重ねることが可能です。<br /><br />
|
||||
〜〜〜〜〜〜リスト〜〜〜〜〜〜<br /><br />
|
||||
(半角)<br />
|
||||
+(半角)内容1<br />
|
||||
+(半角)内容2<br />
|
||||
(半角)<br /><br />
|
||||
内容の数に制限はありません。<br />
|
||||
投稿トップにリストを持ってくる場合に限り1行目の(半角)は必要ありません。<br />
|
||||
+(半角)を1.(半角)に置き換えることで数字付きリストになります。<br /><br />
|
||||
〜〜〜〜〜上付き文字〜〜〜〜〜<br /><br />
|
||||
_上付き文字_<br /><br />
|
||||
〜〜〜〜〜下付き文字〜〜〜〜〜<br /><br />
|
||||
__下付き文字__<br /><br />
|
||||
〜〜〜〜〜小さい文字〜〜〜〜〜<br /><br />
|
||||
___小さい文字___<br /><br />
|
||||
〜〜〜〜〜取り消し線〜〜〜〜〜<br /><br />
|
||||
~~取り消したい文字列~~<br /><br />
|
||||
〜〜〜〜〜〜横罫線〜〜〜〜〜〜<br /><br />
|
||||
___<br /><br />
|
||||
〜〜〜〜〜〜リンク〜〜〜〜〜〜<br /><br />
|
||||
[リンク文章](https://・・・)<br /><br />
|
||||
〜〜〜〜〜〜画像〜〜〜〜〜〜<br /><br />
|
||||
<br /><br />
|
||||
リンク、画像ともにURLにはhttps://から始まる物のみご利用可能です。
|
||||
</p>
|
||||
</div>
|
||||
</Collapsable>
|
||||
<div className='announcements__icon'>
|
||||
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon='caret-up' onClick={() => this.onClick('markdown', this.state)} size={20} animate active={this.state.showId === 'markdown'} />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!this.state.isLoaded) {
|
||||
if (!nextProps.isLoading && (nextProps.homeSize === 0 || this.props.homeSize !== nextProps.homeSize)) {
|
||||
this.setState({ isLoaded: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(Announcements);
|
||||
@ -20,6 +20,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { length } from 'stringz';
|
||||
import { countableText } from '../util/counter';
|
||||
import Icon from 'mastodon/components/icon';
|
||||
import { UserCounter } from './user_counter';
|
||||
|
||||
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
|
||||
|
||||
@ -28,6 +29,10 @@ const messages = defineMessages({
|
||||
spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
|
||||
publish: { id: 'compose_form.publish', defaultMessage: 'Toot' },
|
||||
publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
|
||||
|
||||
|
||||
utilBtns_goji: { id: 'compose_form.utilBtns_goji', defaultMessage: 'Typo!!!' },
|
||||
utilBtns_harukin: { id: 'compose_form.utilBtns_harukin', defaultMessage: 'Burn Harukin' }
|
||||
});
|
||||
|
||||
export default @injectIntl
|
||||
@ -61,6 +66,8 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
showSearch: PropTypes.bool,
|
||||
anyMedia: PropTypes.bool,
|
||||
singleColumn: PropTypes.bool,
|
||||
onGojiSubmit: PropTypes.func.isRequired,
|
||||
onHarukinSubmit: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
@ -88,7 +95,7 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
|
||||
const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('');
|
||||
|
||||
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
|
||||
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 2048 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -177,11 +184,15 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
this.props.onPickEmoji(position, data, needsSpace);
|
||||
}
|
||||
|
||||
|
||||
handleOnGojiSubmit = () => this.props.onGojiSubmit(this.autosuggestTextarea.textarea);
|
||||
handleOnHarukinSubmit = () => this.props.onHarukinSubmit(this.autosuggestTextarea.textarea);
|
||||
|
||||
render () {
|
||||
const { intl, onPaste, showSearch, anyMedia } = this.props;
|
||||
const disabled = this.props.isSubmitting;
|
||||
const text = [this.props.spoilerText, countableText(this.props.text)].join('');
|
||||
const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 500 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
|
||||
const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 2048 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
|
||||
let publishText = '';
|
||||
|
||||
if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
|
||||
@ -243,11 +254,22 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
<PrivacyDropdownContainer />
|
||||
<SpoilerButtonContainer />
|
||||
</div>
|
||||
<div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
|
||||
<div className='character-counter__wrapper'><CharacterCounter max={2048} text={text} /></div>
|
||||
</div>
|
||||
|
||||
<div className='compose-form__publish'>
|
||||
<div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
|
||||
<div className='compose-form__publish-button-wrapper'>
|
||||
|
||||
<Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block>
|
||||
<span className="fa fa-send">{publishText}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="compose-form__utilBtns">
|
||||
|
||||
<Button className="compose-form__utilBtns-goji" text={intl.formatMessage(messages.utilBtns_goji)} onClick={this.handleOnGojiSubmit} block />
|
||||
<Button className="compose-form__utilBtns-harukin" text={intl.formatMessage(messages.utilBtns_harukin)} onClick={this.handleOnHarukinSubmit} block />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default class UserCounter extends React.PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<span>10人</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { connect } from 'react-redux';
|
||||
import Announcements from '../components/announcements';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
homeSize: state.getIn(['timelines', 'home', 'items']).size,
|
||||
isLoading: state.getIn(['timelines', 'home', 'isLoading']),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(Announcements);
|
||||
@ -11,6 +11,11 @@ import {
|
||||
uploadCompose,
|
||||
} from '../../../actions/compose';
|
||||
|
||||
import {
|
||||
submitGoji,
|
||||
submitHarukin
|
||||
} from '../../../actions/UtilBtns';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
text: state.getIn(['compose', 'text']),
|
||||
suggestions: state.getIn(['compose', 'suggestions']),
|
||||
@ -61,6 +66,18 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
dispatch(insertEmojiCompose(position, data, needsSpace));
|
||||
},
|
||||
|
||||
onRisaSubmit (textarea) {
|
||||
dispatch(submitRisa(textarea));
|
||||
},
|
||||
|
||||
onGojiSubmit (textarea) {
|
||||
dispatch(submitGoji(textarea));
|
||||
},
|
||||
|
||||
onHarukinSubmit (textarea) {
|
||||
dispatch(submitHarukin(textarea));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);
|
||||
|
||||
@ -17,6 +17,7 @@ import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
|
||||
import { mascot } from '../../initial_state';
|
||||
import Icon from 'mastodon/components/icon';
|
||||
import { logOut } from 'mastodon/utils/log_out';
|
||||
import AnnouncementsContainer from './containers/announcements_container';
|
||||
|
||||
const messages = defineMessages({
|
||||
start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
|
||||
@ -127,6 +128,7 @@ class Compose extends React.PureComponent {
|
||||
<NavigationContainer onClose={this.onBlur} />
|
||||
|
||||
<ComposeFormContainer />
|
||||
<AnnouncementsContainer />
|
||||
|
||||
<div className='drawer__inner__mastodon'>
|
||||
<img alt='' draggable='false' src={mascot || elephantUIPlane} />
|
||||
|
||||
@ -18,6 +18,7 @@ import TrendsContainer from './containers/trends_container';
|
||||
const messages = defineMessages({
|
||||
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
|
||||
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
|
||||
admin_notifications: { id: 'tabs_bar.admin_notifications', defaultMessage: 'Admin Notifications' },
|
||||
public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
|
||||
settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
|
||||
community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
|
||||
@ -106,23 +107,25 @@ class GettingStarted extends ImmutablePureComponent {
|
||||
|
||||
if (profile_directory) {
|
||||
navItems.push(
|
||||
<ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />
|
||||
<ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
|
||||
<ColumnLink key={i++} icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
|
||||
);
|
||||
|
||||
height += 48;
|
||||
height += 48*2;
|
||||
}
|
||||
|
||||
navItems.push(
|
||||
<ColumnSubheading key={i++} text={intl.formatMessage(messages.personal)} />
|
||||
<ColumnSubheading key={i++} text={intl.formatMessage(messages.personal)} />,
|
||||
);
|
||||
|
||||
height += 34;
|
||||
} else if (profile_directory) {
|
||||
navItems.push(
|
||||
<ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />
|
||||
<ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
|
||||
<ColumnLink key={i++} icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
|
||||
);
|
||||
|
||||
height += 48;
|
||||
height += 48*2;
|
||||
}
|
||||
|
||||
navItems.push(
|
||||
|
||||
@ -16,6 +16,8 @@ const NavigationPanel = () => (
|
||||
<NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
|
||||
<NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
|
||||
<NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' id='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
|
||||
<NavLink className='column-link column-link--transparent' to='/timelines/tag/Yづinfo'><Icon className='colmun-link__icon' id='bullhorn' fixedWidth /><FormattedMessage id='tabs_bar.admin_notifications' defaultMessage='Admin Notification' /></NavLink>
|
||||
<NavLink className='column-link column-link--transparent' to='/bookmarks'><Icon className='colmun-link__icon' id='bookmark' fixedWidth /><FormattedMessage id='navigation_bar.bookmarks' defaultMessage='Bookmark' /></NavLink>
|
||||
<NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' id='star' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
|
||||
<NavLink className='column-link column-link--transparent' to='/bookmarks'><Icon className='column-link__icon' id='bookmark' fixedWidth /><FormattedMessage id='navigation_bar.bookmarks' defaultMessage='Bookmarks' /></NavLink>
|
||||
<NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' id='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
"column.lists": "リスト",
|
||||
"column.mutes": "ミュートしたユーザー",
|
||||
"column.notifications": "通知",
|
||||
"column.pins": "固定されたトゥート",
|
||||
"column.pins": "固定された投稿",
|
||||
"column.public": "連合タイムライン",
|
||||
"column_back_button.label": "戻る",
|
||||
"column_header.hide_settings": "設定を隠す",
|
||||
@ -80,7 +80,7 @@
|
||||
"compose_form.hashtag_warning": "このトゥートは公開設定ではないのでハッシュタグの一覧に表示されません。公開トゥートだけがハッシュタグで検索できます。",
|
||||
"compose_form.lock_disclaimer": "あなたのアカウントは{locked}になっていません。誰でもあなたをフォローすることができ、フォロワー限定の投稿を見ることができます。",
|
||||
"compose_form.lock_disclaimer.lock": "承認制",
|
||||
"compose_form.placeholder": "今なにしてる？",
|
||||
"compose_form.placeholder": "ちょうどL.A.に到着しました。",
|
||||
"compose_form.poll.add_option": "追加",
|
||||
"compose_form.poll.duration": "アンケート期間",
|
||||
"compose_form.poll.option_placeholder": "項目 {number}",
|
||||
@ -95,6 +95,8 @@
|
||||
"compose_form.spoiler.marked": "閲覧注意が設定されています",
|
||||
"compose_form.spoiler.unmarked": "閲覧注意が設定されていません",
|
||||
"compose_form.spoiler_placeholder": "ここに警告を書いてください",
|
||||
"compose_form.utilBtns_goji": "誤字盛！",
|
||||
"compose_form.utilBtns_harukin": "はるきん焼却",
|
||||
"confirmation_modal.cancel": "キャンセル",
|
||||
"confirmations.block.block_and_report": "ブロックし通報",
|
||||
"confirmations.block.confirm": "ブロック",
|
||||
@ -171,7 +173,8 @@
|
||||
"getting_started.invite": "招待",
|
||||
"getting_started.open_source_notice": "Mastodonはオープンソースソフトウェアです。誰でもGitHub ( {github} ) から開発に参加したり、問題を報告したりできます。",
|
||||
"getting_started.security": "アカウント設定",
|
||||
"getting_started.terms": "プライバシーポリシー",
|
||||
"getting_started.security": "セキュリティ",
|
||||
"getting_started.terms": "利用規約とプライバシーポリシー",
|
||||
"hashtag.column_header.tag_mode.all": "と {additional}",
|
||||
"hashtag.column_header.tag_mode.any": "か {additional}",
|
||||
"hashtag.column_header.tag_mode.none": "({additional} を除く)",
|
||||
@ -181,6 +184,7 @@
|
||||
"hashtag.column_settings.tag_mode.any": "いずれかを含む",
|
||||
"hashtag.column_settings.tag_mode.none": "これらを除く",
|
||||
"hashtag.column_settings.tag_toggle": "このカラムに追加のタグを含める",
|
||||
"home.column_settings.advanced": "高度な設定",
|
||||
"home.column_settings.basic": "基本設定",
|
||||
"home.column_settings.show_reblogs": "ブースト表示",
|
||||
"home.column_settings.show_replies": "返信表示",
|
||||
@ -269,7 +273,8 @@
|
||||
"navigation_bar.filters": "フィルター設定",
|
||||
"navigation_bar.follow_requests": "フォローリクエスト",
|
||||
"navigation_bar.follows_and_followers": "フォロー・フォロワー",
|
||||
"navigation_bar.info": "このサーバーについて",
|
||||
"navigation_bar.generate_qrcode": "プロフィールのQRコードを生成",
|
||||
"navigation_bar.info": "Yづドンについて",
|
||||
"navigation_bar.keyboard_shortcuts": "ホットキー",
|
||||
"navigation_bar.lists": "リスト",
|
||||
"navigation_bar.logout": "ログアウト",
|
||||
@ -279,7 +284,12 @@
|
||||
"navigation_bar.preferences": "ユーザー設定",
|
||||
"navigation_bar.public_timeline": "連合タイムライン",
|
||||
"navigation_bar.security": "セキュリティ",
|
||||
"notification.favourite": "{name}さんがあなたのトゥートをお気に入りに登録しました",
|
||||
"notification.and_n_others": "and {count, plural, one {# other} other {# others}}",
|
||||
"notification.and_n_others": "と、他 {count} 件",
|
||||
"navigation_bar.announcements": "運営からのお知らせ",
|
||||
"navigation_bar.trends": "トレンド",
|
||||
"navigation_bar.bookmarks": "ブックマーク",
|
||||
"notification.favourite": "{name}さんがあなたのトゥートに╰( ^o^)╮-=ﾆ=一＝三★しました",
|
||||
"notification.follow": "{name}さんにフォローされました",
|
||||
"notification.follow_request": "{name} さんがあなたにフォローリクエストしました",
|
||||
"notification.mention": "{name}さんがあなたに返信しました",
|
||||
@ -326,6 +336,7 @@
|
||||
"privacy.unlisted.long": "公開TLで表示しない",
|
||||
"privacy.unlisted.short": "未収載",
|
||||
"refresh": "更新",
|
||||
"qr_modal.description": "QRコードを読み取って簡単にプロフィールにアクセスしましょう。",
|
||||
"regeneration_indicator.label": "読み込み中…",
|
||||
"regeneration_indicator.sublabel": "ホームタイムラインは準備中です！",
|
||||
"relative_time.days": "{number}日前",
|
||||
@ -396,6 +407,7 @@
|
||||
"status.unpin": "プロフィールへの固定を解除",
|
||||
"suggestions.dismiss": "隠す",
|
||||
"suggestions.header": "興味あるかもしれません…",
|
||||
"tabs_bar.admin_notifications": "Adminからのお知らせ",
|
||||
"tabs_bar.federated_timeline": "連合",
|
||||
"tabs_bar.home": "ホーム",
|
||||
"tabs_bar.local_timeline": "ローカル",
|
||||
|
||||
@ -26,3 +26,6 @@
|
||||
@import 'mastodon/dashboard';
|
||||
@import 'mastodon/rtl';
|
||||
@import 'mastodon/accessibility';
|
||||
|
||||
@import 'markdown';
|
||||
@import 'astarte';
|
||||
|
||||
59
app/javascript/styles/astarte.scss
Normal file
59
app/javascript/styles/astarte.scss
Normal file
@ -0,0 +1,59 @@
|
||||
|
||||
.announcements {
|
||||
padding: 0 10px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
color: #282c37;
|
||||
background: darken($white, 10%);
|
||||
border-radius: 4px;
|
||||
|
||||
& + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.announcements__admin {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.announcements__icon {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin: -5px 5px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.announcements__body {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
clear: both;
|
||||
color: #282c37;
|
||||
background: darken($white, 5%);
|
||||
text-decoration: none;
|
||||
padding: 1px 10px 0;
|
||||
border: solid 1px #282c37;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import 'contrast/variables';
|
||||
@import 'application';
|
||||
@import 'contrast/diff';
|
||||
|
||||
@import 'markdown';
|
||||
|
||||
24
app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss
Normal file
24
app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss
Normal file
@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Google+ Theme for Mastodon v1.1
|
||||
* Copyright (C) 2018-2019 Genbu Project
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
// @import 'application';
|
||||
@import 'application';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/basics';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/components';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/emoji-picker';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/tables';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/columns';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/lists';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/accounts';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/statuses';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/notifications';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/searches';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/settings';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/icons';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/profile';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/about';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/explore';
|
||||
@ -0,0 +1,15 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
@function adjust-lightness ($color, $lightness) {
|
||||
@if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) {
|
||||
@return lighten($color, $lightness);
|
||||
}
|
||||
|
||||
@if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) {
|
||||
@return darken($color, $lightness);
|
||||
}
|
||||
|
||||
@return change-color($color, $lightness: $lightness);
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
|
||||
@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
|
||||
@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
|
||||
@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
|
||||
@mixin material-border { border-radius: 4px }
|
||||
@mixin material-card-radius { border-radius: 2px }
|
||||
@mixin material-icon-large { font-size: 20px }
|
||||
@ -0,0 +1,99 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
// Base colors
|
||||
$active-color: #db4437;
|
||||
$accent-color: #fbbc04;
|
||||
$valid-color: #4285f4;
|
||||
$error-color: #d50000;
|
||||
$checked-color: #4285f4;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
|
||||
// Text colors
|
||||
$primary-text-color: #ffffff;
|
||||
$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
|
||||
$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
|
||||
$secondary-text-color: #2196F3; // ex: リンク
|
||||
$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
|
||||
$light-text-color: #000000;
|
||||
$light-darker1-text-color: darken($light-text-color, 15%);
|
||||
$active-text-color: $active-color;
|
||||
$error-text-color: $error-color;
|
||||
|
||||
|
||||
// Icon colors
|
||||
$icon-color: #BDBDBD;
|
||||
$icon-active-color: $active-color;
|
||||
|
||||
|
||||
// Background colors
|
||||
$base-color: #121212;
|
||||
$base-lighter1-color: #2d2d2d;
|
||||
$base-darker1-color: #000000;
|
||||
|
||||
$column-header-color: $base-lighter1-color;
|
||||
$column-header-hover-color: change-color($color: $column-header-color, $lightness: 10%);
|
||||
|
||||
$status-color: $base-lighter1-color;
|
||||
$status-direct-color: darken($status-color, 5%);
|
||||
$status-actionbar-color: darken($status-color, 2%);
|
||||
|
||||
$account-color: $base-lighter1-color;
|
||||
$account-foreground-color: $base-darker1-color;
|
||||
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
$warning-card-color: #26a69a;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
$trend-color: $base-lighter1-color;
|
||||
|
||||
$setting-base-color: $base-color;
|
||||
$setting-lists-selected-color: darken($base-color, 2%);
|
||||
$setting-lists-hover-color: darken($base-color, 5%);
|
||||
$setting-content-base-color: $base-lighter1-color;
|
||||
|
||||
$setting-toggle-color: #b9b9b9;
|
||||
$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
|
||||
$setting-toggle-thumb-color: #fafafa;
|
||||
$setting-toggle-thumb-checked-color: $checked-color;
|
||||
|
||||
$setting-emphasis-color: $verified-color;
|
||||
|
||||
$dashboard-counters-base-color: $base-color;
|
||||
$dashboard-counters-hover-color: lighten($base-color, 2%);
|
||||
|
||||
$log-entry-color: $base-lighter1-color;
|
||||
$log-entry-extra-color: $base-color;
|
||||
$log-entry-extra--neutral-color: $valid-color;
|
||||
$log-entry-extra--old-color: $active-color;
|
||||
$log-entry-extra--new-color: $verified-color;
|
||||
|
||||
$explore-header-color: lighten($accent-color, 16%);
|
||||
$explore-directory-color: $base-lighter1-color;
|
||||
|
||||
$active-button-color: $valid-color; //文字入りボタン
|
||||
$non-active-button-color: lighten($base-color, 20%);
|
||||
|
||||
$floating-acton-button-hover-color: lighten($active-color, 10%);
|
||||
|
||||
|
||||
// Shadow colors
|
||||
$column-header-shadow-color: rgba(0, 0, 0, 0.3);
|
||||
$status-shadow-color: rgba(0, 0, 0, 0.14);
|
||||
$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
|
||||
$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
|
||||
$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
|
||||
$button-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
||||
// Separation colors
|
||||
$base-separation-color: rgba(0, 0, 0, 0.14);
|
||||
|
||||
|
||||
//Border colors
|
||||
$non-elevated-card-boader : #e0e0e0;
|
||||
@ -0,0 +1,138 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
// from mastodon/about.scss
|
||||
$column-breakpoint: 700px;
|
||||
|
||||
|
||||
|
||||
.landing-page {
|
||||
h3, h4, h5, h6 { color: $primary-lighter2-text-color }
|
||||
p { color: $primary-lighter1-text-color }
|
||||
em { color: $primary-text-color }
|
||||
|
||||
.column-0 { background: $base-darker1-color }
|
||||
.column-2 {
|
||||
.landing-page {
|
||||
&__information { padding: 0 }
|
||||
|
||||
&__short-description {
|
||||
& > .row:first-child {
|
||||
background: $base-darker1-color;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding-left: 40px; padding-right: 40px;
|
||||
&:last-child { padding-bottom: 45px }
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
padding-left: 20px; padding-right: 20px;
|
||||
&:last-child { padding-bottom: 25px }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__forms,
|
||||
&__information,
|
||||
&__call-to-action {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
&__forms {
|
||||
padding: 0;
|
||||
|
||||
& > *:first-child { margin: inherit }
|
||||
& > * { margin-left: 20px; margin-right: 20px; }
|
||||
|
||||
.brand { background: $base-darker1-color }
|
||||
|
||||
form {
|
||||
& > .input input {
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
}
|
||||
|
||||
.separator-or {
|
||||
margin-left: 20px; margin-right: 20px;
|
||||
|
||||
span {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
|
||||
.separator-or span { background: $base-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__information {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.contact-widget {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.contact-widget {
|
||||
&__mail {
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong { color: inherit }
|
||||
|
||||
.row:first-child {
|
||||
h1 small {
|
||||
color: $light-darker1-text-color;
|
||||
|
||||
span { color: $light-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__call-to-action {
|
||||
.row__information-board {
|
||||
.information-board__section {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
& > span:last-child { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
.features-list {
|
||||
.features-list__row {
|
||||
.text { color: $primary-lighter1-text-color }
|
||||
.visual .fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer { color: $primary-lighter1-text-color }
|
||||
|
||||
#mastodon-timeline {
|
||||
color: $primary-text-color;
|
||||
background: transparent;
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,194 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.account {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
.account {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-role {
|
||||
color: $primary-lighter2-text-color;
|
||||
background-color: rgba($base-separation-color, 0.1);
|
||||
border-color: rgba($base-separation-color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
> .column-back-button {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account-timeline__header {
|
||||
.account__header {
|
||||
background-color: $account-foreground-color;
|
||||
|
||||
> div { background-color: inherit } // -> v2.7.4
|
||||
|
||||
.account__header {
|
||||
&__username { color: $secondary-lighter1-text-color }
|
||||
&__fields { @extend .account__header__fields; }
|
||||
|
||||
&__image { // v2.8.0 ->
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src$="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar { // v2.8.0 ->
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
.account__header {
|
||||
&__tabs {
|
||||
.avatar {
|
||||
.account__avatar {
|
||||
border-color: $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.icon-button {
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
h1 { color: $primary-text-color }
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__bio {
|
||||
.account__header {
|
||||
&__content { color: $primary-text-color }
|
||||
&__fields { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
&__links {
|
||||
&, a { color: $primary-lighter1-text-color }
|
||||
strong { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account--action-button {
|
||||
.icon-button:not(.active) {
|
||||
color: darken($light-text-color, 7%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
&__disclaimer,
|
||||
&__action-bar,
|
||||
&__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__action-bar {
|
||||
&__tab {
|
||||
border-color: $base-separation-color;
|
||||
&.active { border-bottom-color: $active-color }
|
||||
|
||||
> span { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
|
||||
&.active {
|
||||
color: $active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-authorize__wrapper {
|
||||
@include status-shadow;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:focus { @include status-focus-shadow; }
|
||||
|
||||
.account {
|
||||
&__header__content {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&--panel {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
dl {
|
||||
border-color: $base-separation-color;
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
&.verified {
|
||||
border-color: transparentize($valid-color, 0.5);
|
||||
background: transparentize($valid-color, 0.75);
|
||||
|
||||
a { color: lighten($verified-color, 20%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account__action-bar__tab {
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
body {
|
||||
&,
|
||||
.ui {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
background: inherit;
|
||||
|
||||
.status {
|
||||
@include status-focus-shadow;
|
||||
|
||||
&.status-direct { background: $status-direct-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
& { background: $status-color }
|
||||
&__action-bar { background: $status-actionbar-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: darken($base-lighter1-color, 12%);
|
||||
|
||||
&:hover { background: darken($base-lighter1-color, 16%) }
|
||||
&:active { background: darken($base-lighter1-color, 12%) }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $base-color;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,335 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.tabs-bar {
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
position: relative;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
color: $icon-color;
|
||||
border-bottom: 4px solid $column-header-color;
|
||||
padding: 15px 10px 11px 10px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid $active-color;
|
||||
}
|
||||
|
||||
.fa {
|
||||
@include material-icon-large;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.drawer {
|
||||
&__header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.drawer__tab {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover { background: $column-header-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__pager {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
|
||||
.drawer__inner {
|
||||
background: $column-header-color;
|
||||
|
||||
&__mastodon { display: none }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
color: $secondary-text-color;
|
||||
background: $column-header-color;
|
||||
|
||||
.navigation-bar {
|
||||
&__profile {
|
||||
strong { color: $primary-text-color }
|
||||
&-edit { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.compose-form {
|
||||
.compose-form {
|
||||
&__buttons-wrapper {
|
||||
background: $column-header-color;
|
||||
|
||||
&.character-counter__wrapper {
|
||||
.character-counter { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__warning {
|
||||
background-color: $warning-card-color;
|
||||
}
|
||||
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
&__modifiers { background-color: $base-lighter1-color }
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
background-color: $base-lighter1-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.character-counter {
|
||||
color: $icon-color
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
&-subheading,
|
||||
&-link__badge {
|
||||
background: $base-color;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
&-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
background: transparent;
|
||||
|
||||
*[role="feed"] {
|
||||
article {
|
||||
margin: 1em 0;
|
||||
&:first-of-type { margin: 0 }
|
||||
|
||||
&:focus { outline: none }
|
||||
}
|
||||
}
|
||||
|
||||
div[tabindex="-1"] { margin-bottom: 1em }
|
||||
}
|
||||
|
||||
.notification__filter-bar {
|
||||
background: $column-header-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
button {
|
||||
color: $icon-color;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background: none center / contain no-repeat;
|
||||
background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// v2.9.0以降に対応
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
& {
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
& {
|
||||
border-top: 1px solid $base-separation-color;
|
||||
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.load {
|
||||
&-more,
|
||||
&-gap {
|
||||
background: transparent;
|
||||
|
||||
&:hover { background: darken($column-header-color, 10%) }
|
||||
}
|
||||
|
||||
&-gap { border: 0 }
|
||||
}
|
||||
|
||||
.confirmation-modal {
|
||||
@include material-card-radius;
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
&__action-bar {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
box-shadow: 0 2px 5px 0 transparent;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.floating-action-button {
|
||||
font-size: 24px;
|
||||
background-color: $active-color;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $floating-acton-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $active-button-color;
|
||||
|
||||
.text-icon-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.button--block { @include button-shadow }
|
||||
|
||||
.button-secondary {
|
||||
background-color: $primary-lighter1-text-color;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
&__modal {
|
||||
.media-modal {
|
||||
&__close.icon-button {
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($base-lighter1-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOM操作によりpaddingが調整できないもの
|
||||
.privacy-dropdown__value-icon.icon-button.inverted,
|
||||
.compose-form__poll-button-icon.icon-button.inverted,
|
||||
.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }
|
||||
@ -0,0 +1,38 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
//border: 1px solid $base-separation-color;
|
||||
//不要(?)
|
||||
|
||||
> a {
|
||||
@include status-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.card__bar {
|
||||
background: initial;
|
||||
|
||||
.display-name strong { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.card__img { background: $card-image-color }
|
||||
.card__bar {
|
||||
background: $card-color;
|
||||
|
||||
.avatar {
|
||||
img { background: transparent }
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong { color: $primary-text-color }
|
||||
span { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $column-header-color;
|
||||
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__separator { margin: 4px 0 }
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
.actions-modal {
|
||||
@include material-card-radius;
|
||||
|
||||
& > ul {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
padding: 16px 16px;
|
||||
background: $column-header-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__separator { border-bottom-color: $base-separation-color }
|
||||
}
|
||||
|
||||
& > li:not(:empty) {
|
||||
@extend .dropdown-menu__item;
|
||||
|
||||
a {
|
||||
padding: 12px 16px;
|
||||
color: $primary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: $base-lighter1-color;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-right: 16px;
|
||||
padding-left: 74px;
|
||||
|
||||
&__avatar {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.status-card {
|
||||
color: $primary-lighter1-text-color;
|
||||
&__title, &__description { color: $primary-lighter2-text-color }
|
||||
|
||||
&__image { background: transparent }
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'components-button';
|
||||
@import 'components-card';
|
||||
@import 'components-dropdown';
|
||||
@import 'components-status-card';
|
||||
@ -0,0 +1,68 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.emoji-mart {
|
||||
&-bar {
|
||||
border: 0 solid $base-separation-color;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-anchors {
|
||||
color: $icon-color;
|
||||
}
|
||||
&-anchor {
|
||||
&-selected {
|
||||
color: $icon-active-color;
|
||||
|
||||
&:hover {
|
||||
color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-bar {
|
||||
background-color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
&-search input {
|
||||
color: $primary-text-color;
|
||||
background-color: $form-color;
|
||||
border: 0px solid #ffffff00;
|
||||
}
|
||||
|
||||
&-category-label span {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&-scroll {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown {
|
||||
&__modifiers {
|
||||
&__menu {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
@include column-shadow;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
.page-header {
|
||||
background: $explore-header-color;
|
||||
|
||||
h1 { color: $primary-text-color }
|
||||
p { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.directory,
|
||||
.notice-widget { @include column-shadow; }
|
||||
|
||||
.directory {
|
||||
background: $explore-directory-color;
|
||||
|
||||
.accounts-table {
|
||||
&__count {
|
||||
color: $primary-lighter2-text-color;
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
& > a {
|
||||
@include status-shadow;
|
||||
background: $explore-directory-color;
|
||||
}
|
||||
|
||||
h4 { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.notice-widget {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $explore-directory-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.keyboard-shortcuts {
|
||||
kbd {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
border-color: $base-darker1-color;
|
||||
|
||||
margin: 0 0.25em;
|
||||
|
||||
&:first-child { margin-left: 0 }
|
||||
&:last-child { margin-right: 0 }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.column {
|
||||
.column-back-button { background: inherit }
|
||||
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
label input {
|
||||
color: $secondary-text-color;
|
||||
&:focus { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-inline-form ~ .scrollable {
|
||||
article { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
&:active, &:focus { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-editor {
|
||||
background: $base-color;
|
||||
h4 { background: $column-header-color }
|
||||
|
||||
.drawer__pager {
|
||||
.drawer__inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-adder {
|
||||
background: $base-color;
|
||||
|
||||
.column-inline-form { border-bottom: 1px solid $base-separation-color }
|
||||
|
||||
&__account,
|
||||
&__lists { background: $column-header-color }
|
||||
|
||||
&__lists {
|
||||
.list { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.notification {
|
||||
&.notification-favourite {
|
||||
.status {
|
||||
&.status-direct { background: transparent }
|
||||
}
|
||||
}
|
||||
|
||||
> .notification__message {
|
||||
color: $primary-lighter2-text-color;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
|
||||
.notification__display-name {
|
||||
&:hover { color: inherit }
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
.star-icon { color: $icon-active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,232 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
a.button {
|
||||
@include button-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-button {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-header {
|
||||
@include status-shadow;
|
||||
|
||||
&__image {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
@media screen and (min-width: 600px) { height: 500px }
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) { margin-top: -140px }
|
||||
|
||||
&::before { background: $base-lighter1-color }
|
||||
|
||||
.avatar {
|
||||
@media screen and (max-width: 600px) {
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
|
||||
display: initial;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
justify-content: center;
|
||||
flex: auto;
|
||||
|
||||
.spacer { display: none }
|
||||
|
||||
a.button.logo-button {
|
||||
color: $light-text-color;
|
||||
background: $secondary-text-color;
|
||||
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
|
||||
&#Mastodon { fill: $secondary-text-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-counters {
|
||||
.counter {
|
||||
color: $light-text-color;
|
||||
border-right: 0;
|
||||
|
||||
&::after { border-bottom-color: $base-color }
|
||||
|
||||
&.active {
|
||||
&::after { border-bottom-color: $active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
.public-account-bio {
|
||||
.account__header__content { text-align: center }
|
||||
}
|
||||
|
||||
&__links {
|
||||
color: $primary-text-color;
|
||||
|
||||
a {
|
||||
&, strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-bio,
|
||||
.endorsements-widget,
|
||||
.hero-widget { @include status-shadow; }
|
||||
|
||||
.public-account-bio {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.account__header__content { color: $primary-text-color }
|
||||
&__extra { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.endorsements-widget {
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
&__img { background: $base-color }
|
||||
&__text {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&, em { color: $primary-lighter2-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
a {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
box-shadow: none;
|
||||
|
||||
.entry {
|
||||
margin: 1em 0;
|
||||
background: transparent;
|
||||
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
.footer {
|
||||
h4 { color: $primary-lighter1-text-color }
|
||||
|
||||
ul {
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.brand {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.search {
|
||||
.search {
|
||||
&__input {
|
||||
@include material-border;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
|
||||
&__icon {
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
> .search-results {
|
||||
&__header { background: $base-color }
|
||||
&__section {
|
||||
> h5 { background: darken($base-color, 10%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends__item {
|
||||
background: $trend-color;
|
||||
|
||||
.trends__item {
|
||||
&__name a { color: $secondary-text-color }
|
||||
&__current { color: lighten($secondary-text-color, 10%) }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.edit_account {
|
||||
@media screen and (min-width: 415px) {
|
||||
.card {
|
||||
> a {
|
||||
position: relative;
|
||||
|
||||
.card__img {
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
.card__bar {
|
||||
position: static;
|
||||
padding-top: 30%;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
flex: auto;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.dashboard {
|
||||
&__counters {
|
||||
& > div {
|
||||
& > div, & > a { background: $dashboard-counters-base-color }
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $dashboard-counters-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text,
|
||||
&__num { color: $primary-text-color }
|
||||
|
||||
&__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__widgets {
|
||||
a:not(.name-tag) { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.admin-wrapper {
|
||||
.content {
|
||||
.directory__tag {
|
||||
& > a,
|
||||
& > div { background: $setting-base-color }
|
||||
|
||||
h4 {
|
||||
& { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.log-entry {
|
||||
.log-entry {
|
||||
&__header {
|
||||
color: $primary-lighter2-text-color;
|
||||
background: $log-entry-color;
|
||||
|
||||
.username,
|
||||
.target,
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
&__timestamp { color: $primary-lighter1-text-color }
|
||||
&__icon { color: $icon-color }
|
||||
|
||||
&__extras {
|
||||
color: $primary-text-color;
|
||||
background: $log-entry-extra-color;
|
||||
|
||||
.diff-neutral { color: $log-entry-extra--neutral-color }
|
||||
.diff-old { color: $log-entry-extra--old-color }
|
||||
.diff-new { color: $log-entry-extra--new-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.report-card {
|
||||
background: $setting-content-base-color;
|
||||
|
||||
&__profile__stats {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
a {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($primary-lighter2-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__item {
|
||||
border-top-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__icon { color: $icon-color }
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__row {
|
||||
&, &:nth-child(2n) { background: $base-lighter1-color }
|
||||
&:hover, &:nth-child(2n):hover { background: $column-header-hover-color }
|
||||
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&__content {
|
||||
.status__content { color: $primary-text-color }
|
||||
.detailed-status__meta { color: $primary-lighter1-text-color }
|
||||
|
||||
|
||||
.accounts-table { // v2.8.0 ->
|
||||
.accounts-table {
|
||||
&__count {
|
||||
& {color: $primary-text-color }
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
td .account { background: inherit }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
&__bubble { color: $primary-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
@ -0,0 +1,245 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'settings-account';
|
||||
@import 'settings-report';
|
||||
@import 'settings-log';
|
||||
@import 'settings-dashboard';
|
||||
@import 'settings-directory_tag';
|
||||
|
||||
|
||||
|
||||
body.admin {
|
||||
color: $primary-text-color;
|
||||
background: $setting-base-color;
|
||||
|
||||
.sidebar {
|
||||
&-wrapper { background: inherit }
|
||||
|
||||
ul {
|
||||
border-radius: 0;
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-hover-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-selected-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
@include material-icon-large;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
ul { background: darken($setting-base-color, 4%) }
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $icon-active-color;
|
||||
background: initial;
|
||||
|
||||
&:hover { background: $setting-lists-hover-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include column-shadow;
|
||||
background: $setting-content-base-color;
|
||||
|
||||
h2, h3, h4, h6 { color: $primary-text-color }
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
h2, h4, hr { border-bottom-color: $base-separation-color }
|
||||
.muted-hint { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.input {
|
||||
&.boolean,
|
||||
&.with_label,
|
||||
&.with_floating_label {
|
||||
.label_input > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.with_block_label {
|
||||
& > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.radio_buttons{
|
||||
.radio label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&-copy {
|
||||
background: $base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
|
||||
.check_boxes {
|
||||
.checkbox {
|
||||
label { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=number],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: $primary-text-color;
|
||||
background: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover {
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: darken($setting-content-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
color: $primary-text-color;
|
||||
background-color: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label,
|
||||
.error {
|
||||
color: $error-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hint, p.hint {
|
||||
color: $primary-lighter1-text-color !important;
|
||||
|
||||
code {
|
||||
color: $light-text-color;
|
||||
background: $setting-emphasis-color;
|
||||
}
|
||||
}
|
||||
|
||||
.recommended {
|
||||
color: $verified-color;
|
||||
background-color: transparentize($verified-color, 0.75);
|
||||
border-color: $verified-color;
|
||||
}
|
||||
|
||||
.label_input {
|
||||
&__append { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
button {
|
||||
@include button-shadow;
|
||||
background-color: $active-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning { background: change-color($color: $error-color, $alpha: 0.8) }
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page,
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.page {
|
||||
&.current {
|
||||
background: $icon-active-color;
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
.filter-subset {
|
||||
strong { color: $primary-text-color }
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&:hover { color: $primary-text-color }
|
||||
|
||||
&.selected {
|
||||
color: $active-text-color;
|
||||
border-bottom-color: $active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new_form_two_factor_confirmation {
|
||||
.qr-wrapper {
|
||||
.qr-code { box-shadow: none }
|
||||
.qr-alternative { color: $secondary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
select#user_setting_default_privacy {
|
||||
&[for=user_setting_default_privacy_public],
|
||||
&[for=user_setting_default_privacy_unlisted],
|
||||
option[value="public"],
|
||||
option[value="unlisted"] { color: $active-text-color !important }
|
||||
}
|
||||
|
||||
.column-header__collapsible__extra {
|
||||
.column-settings__section { color: $primary-text-color }
|
||||
|
||||
.setting-toggle {
|
||||
.react-toggle {
|
||||
&.react-toggle--checked {
|
||||
> .react-toggle-track { background: $setting-toggle-checked-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-checked-color;
|
||||
background-color: $setting-toggle-thumb-checked-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .react-toggle-track { background: $setting-toggle-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-color;
|
||||
background-color: $setting-toggle-thumb-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle__label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.setting-meta__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
@ -0,0 +1,123 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.status {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
border-bottom: 0;
|
||||
|
||||
transition: box-shadow 0.1s 0s ease-out;
|
||||
|
||||
&.light {
|
||||
.status {
|
||||
&__relative-time { color: $primary-lighter1-text-color }
|
||||
&__display-name {
|
||||
color: $primary-text-color;
|
||||
|
||||
.display-name__account { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.display-name strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
background: $status-direct-color;
|
||||
|
||||
&:not(.read) {
|
||||
background: inherit;
|
||||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.status__content {
|
||||
p { color: lighten($primary-text-color, 20%) }
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
&__info {
|
||||
.status__display-name {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.status__relative-time { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__action-bar__counter__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.detailed-status__datetime { color: $primary-lighter1-text-color }
|
||||
|
||||
.detailed-status__link {
|
||||
.fa.fa-star { vertical-align: middle }
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@include status-shadow;
|
||||
|
||||
.detailed-status { @extend .detailed-status; }
|
||||
.detailed-status__action-bar {
|
||||
background: $status-actionbar-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status,
|
||||
.detailed-status {
|
||||
background: $status-color;
|
||||
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card,
|
||||
a.status-card.compact {
|
||||
&:hover { background: initial }
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.status-card.compact {
|
||||
border-color: $non-elevated-card-boader;
|
||||
|
||||
&__title {
|
||||
color : $primary-text-color;
|
||||
}
|
||||
|
||||
&__host {
|
||||
color: $primary-lighter1-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name-tag,
|
||||
a.name-tag {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.table {
|
||||
thead th { border-bottom-color: $base-separation-color }
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td, & > th { background: darken($base-color, 4%) }
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
a.table-action-link,
|
||||
button.table-action-link {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover { color: darken($secondary-text-color, 8%) }
|
||||
}
|
||||
24
app/javascript/styles/gplus-theme-for-mastodon-dev.scss
Normal file
24
app/javascript/styles/gplus-theme-for-mastodon-dev.scss
Normal file
@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Google+ Theme for Mastodon v1.1
|
||||
* Copyright (C) 2018-2019 Genbu Project
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
// @import 'application';
|
||||
@import 'application';
|
||||
@import 'gplus-theme-for-mastodon-dev/basics';
|
||||
@import 'gplus-theme-for-mastodon-dev/components';
|
||||
@import 'gplus-theme-for-mastodon-dev/emoji-picker';
|
||||
@import 'gplus-theme-for-mastodon-dev/tables';
|
||||
@import 'gplus-theme-for-mastodon-dev/columns';
|
||||
@import 'gplus-theme-for-mastodon-dev/lists';
|
||||
@import 'gplus-theme-for-mastodon-dev/accounts';
|
||||
@import 'gplus-theme-for-mastodon-dev/statuses';
|
||||
@import 'gplus-theme-for-mastodon-dev/notifications';
|
||||
@import 'gplus-theme-for-mastodon-dev/searches';
|
||||
@import 'gplus-theme-for-mastodon-dev/settings';
|
||||
@import 'gplus-theme-for-mastodon-dev/icons';
|
||||
@import 'gplus-theme-for-mastodon-dev/profile';
|
||||
@import 'gplus-theme-for-mastodon-dev/about';
|
||||
@import 'gplus-theme-for-mastodon-dev/explore';
|
||||
@ -0,0 +1,15 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
@function adjust-lightness ($color, $lightness) {
|
||||
@if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) {
|
||||
@return lighten($color, $lightness);
|
||||
}
|
||||
|
||||
@if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) {
|
||||
@return darken($color, $lightness);
|
||||
}
|
||||
|
||||
@return change-color($color, $lightness: $lightness);
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
|
||||
@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
|
||||
@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
|
||||
@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
|
||||
@mixin material-border { border-radius: 4px }
|
||||
@mixin material-card-radius { border-radius: 2px }
|
||||
@mixin material-icon-large { font-size: 20px }
|
||||
@ -0,0 +1,99 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
// Base colors
|
||||
$active-color: #db4437;
|
||||
$accent-color: #fbbc04;
|
||||
$valid-color: #4285f4;
|
||||
$error-color: #d50000;
|
||||
$checked-color: #4285f4;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
|
||||
// Text colors
|
||||
$primary-text-color: rgba(0, 0, 0, 0.87);
|
||||
$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
|
||||
$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
|
||||
$secondary-text-color: #2962ff; // ex: リンク
|
||||
$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
|
||||
$light-text-color: #ffffff;
|
||||
$light-darker1-text-color: darken($light-text-color, 15%);
|
||||
$active-text-color: $active-color;
|
||||
$error-text-color: $error-color;
|
||||
|
||||
|
||||
// Icon colors
|
||||
$icon-color: #757575;
|
||||
$icon-active-color: $active-color;
|
||||
|
||||
|
||||
// Background colors
|
||||
$base-color: #f1f1f1;
|
||||
$base-lighter1-color: #ffffff;
|
||||
$base-darker1-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
$column-header-color: $base-lighter1-color;
|
||||
$column-header-hover-color: darken($column-header-color, 10%);
|
||||
|
||||
$status-color: $base-lighter1-color;
|
||||
$status-direct-color: darken($status-color, 5%);
|
||||
$status-actionbar-color: darken($status-color, 2%);
|
||||
|
||||
$account-color: $base-lighter1-color;
|
||||
$account-foreground-color: $base-darker1-color;
|
||||
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
$warning-card-color: #26a69a;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
$trend-color: $base-lighter1-color;
|
||||
|
||||
$setting-base-color: $base-color;
|
||||
$setting-lists-selected-color: darken($base-color, 2%);
|
||||
$setting-lists-hover-color: darken($base-color, 5%);
|
||||
$setting-content-base-color: $base-lighter1-color;
|
||||
|
||||
$setting-toggle-color: #b9b9b9;
|
||||
$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
|
||||
$setting-toggle-thumb-color: #fafafa;
|
||||
$setting-toggle-thumb-checked-color: $checked-color;
|
||||
|
||||
$setting-emphasis-color: $verified-color;
|
||||
|
||||
$dashboard-counters-base-color: $base-color;
|
||||
$dashboard-counters-hover-color: lighten($base-color, 2%);
|
||||
|
||||
$log-entry-color: $base-lighter1-color;
|
||||
$log-entry-extra-color: $base-color;
|
||||
$log-entry-extra--neutral-color: $valid-color;
|
||||
$log-entry-extra--old-color: $active-color;
|
||||
$log-entry-extra--new-color: $verified-color;
|
||||
|
||||
$explore-header-color: lighten($accent-color, 16%);
|
||||
$explore-directory-color: $base-lighter1-color;
|
||||
|
||||
$active-button-color: $valid-color; //文字入りボタン
|
||||
$non-active-button-color: lighten($base-color, 20%);
|
||||
|
||||
$floating-acton-button-hover-color: lighten($active-color, 10%);
|
||||
|
||||
|
||||
// Shadow colors
|
||||
$column-header-shadow-color: rgba(0, 0, 0, 0.3);
|
||||
$status-shadow-color: rgba(0, 0, 0, 0.14);
|
||||
$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
|
||||
$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
|
||||
$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
|
||||
$button-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
||||
// Separation colors
|
||||
$base-separation-color: rgba(0, 0, 0, 0.14);
|
||||
|
||||
|
||||
//Border colors
|
||||
$non-elevated-card-boader : #e0e0e0;
|
||||
138
app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss
Normal file
138
app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss
Normal file
@ -0,0 +1,138 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
// from mastodon/about.scss
|
||||
$column-breakpoint: 700px;
|
||||
|
||||
|
||||
|
||||
.landing-page {
|
||||
h3, h4, h5, h6 { color: $primary-lighter2-text-color }
|
||||
p { color: $primary-lighter1-text-color }
|
||||
em { color: $primary-text-color }
|
||||
|
||||
.column-0 { background: $base-darker1-color }
|
||||
.column-2 {
|
||||
.landing-page {
|
||||
&__information { padding: 0 }
|
||||
|
||||
&__short-description {
|
||||
& > .row:first-child {
|
||||
background: $base-darker1-color;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding-left: 40px; padding-right: 40px;
|
||||
&:last-child { padding-bottom: 45px }
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
padding-left: 20px; padding-right: 20px;
|
||||
&:last-child { padding-bottom: 25px }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__forms,
|
||||
&__information,
|
||||
&__call-to-action {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
&__forms {
|
||||
padding: 0;
|
||||
|
||||
& > *:first-child { margin: inherit }
|
||||
& > * { margin-left: 20px; margin-right: 20px; }
|
||||
|
||||
.brand { background: $base-darker1-color }
|
||||
|
||||
form {
|
||||
& > .input input {
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
}
|
||||
|
||||
.separator-or {
|
||||
margin-left: 20px; margin-right: 20px;
|
||||
|
||||
span {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
|
||||
.separator-or span { background: $base-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__information {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.contact-widget {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.contact-widget {
|
||||
&__mail {
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong { color: inherit }
|
||||
|
||||
.row:first-child {
|
||||
h1 small {
|
||||
color: $light-darker1-text-color;
|
||||
|
||||
span { color: $light-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__call-to-action {
|
||||
.row__information-board {
|
||||
.information-board__section {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
& > span:last-child { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
.features-list {
|
||||
.features-list__row {
|
||||
.text { color: $primary-lighter1-text-color }
|
||||
.visual .fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer { color: $primary-lighter1-text-color }
|
||||
|
||||
#mastodon-timeline {
|
||||
color: $primary-text-color;
|
||||
background: transparent;
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
194
app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss
Normal file
194
app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss
Normal file
@ -0,0 +1,194 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.account {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
.account {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-role {
|
||||
color: $primary-lighter2-text-color;
|
||||
background-color: rgba($base-separation-color, 0.1);
|
||||
border-color: rgba($base-separation-color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
> .column-back-button {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account-timeline__header {
|
||||
.account__header {
|
||||
background-color: $account-foreground-color;
|
||||
|
||||
> div { background-color: inherit } // -> v2.7.4
|
||||
|
||||
.account__header {
|
||||
&__username { color: $secondary-lighter1-text-color }
|
||||
&__fields { @extend .account__header__fields; }
|
||||
|
||||
&__image { // v2.8.0 ->
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src$="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar { // v2.8.0 ->
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
.account__header {
|
||||
&__tabs {
|
||||
.avatar {
|
||||
.account__avatar {
|
||||
border-color: $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.icon-button {
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
h1 { color: $primary-text-color }
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__bio {
|
||||
.account__header {
|
||||
&__content { color: $primary-text-color }
|
||||
&__fields { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
&__links {
|
||||
&, a { color: $primary-lighter1-text-color }
|
||||
strong { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account--action-button {
|
||||
.icon-button:not(.active) {
|
||||
color: darken($light-text-color, 7%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
&__disclaimer,
|
||||
&__action-bar,
|
||||
&__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__action-bar {
|
||||
&__tab {
|
||||
border-color: $base-separation-color;
|
||||
&.active { border-bottom-color: $active-color }
|
||||
|
||||
> span { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
|
||||
&.active {
|
||||
color: $active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-authorize__wrapper {
|
||||
@include status-shadow;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:focus { @include status-focus-shadow; }
|
||||
|
||||
.account {
|
||||
&__header__content {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&--panel {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
dl {
|
||||
border-color: $base-separation-color;
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
&.verified {
|
||||
border-color: transparentize($valid-color, 0.5);
|
||||
background: transparentize($valid-color, 0.75);
|
||||
|
||||
a { color: lighten($verified-color, 20%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account__action-bar__tab {
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
body {
|
||||
&,
|
||||
.ui {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
background: inherit;
|
||||
|
||||
.status {
|
||||
@include status-focus-shadow;
|
||||
|
||||
&.status-direct { background: $status-direct-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
& { background: $status-color }
|
||||
&__action-bar { background: $status-actionbar-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: darken($base-lighter1-color, 12%);
|
||||
|
||||
&:hover { background: darken($base-lighter1-color, 16%) }
|
||||
&:active { background: darken($base-lighter1-color, 12%) }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $base-color;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
335
app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss
Normal file
335
app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss
Normal file
@ -0,0 +1,335 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.tabs-bar {
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
position: relative;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
color: $icon-color;
|
||||
border-bottom: 4px solid $column-header-color;
|
||||
padding: 15px 10px 11px 10px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid $active-color;
|
||||
}
|
||||
|
||||
.fa {
|
||||
@include material-icon-large;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.drawer {
|
||||
&__header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.drawer__tab {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover { background: $column-header-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__pager {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
|
||||
.drawer__inner {
|
||||
background: $column-header-color;
|
||||
|
||||
&__mastodon { display: none }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
color: $secondary-text-color;
|
||||
background: $column-header-color;
|
||||
|
||||
.navigation-bar {
|
||||
&__profile {
|
||||
strong { color: $primary-text-color }
|
||||
&-edit { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.compose-form {
|
||||
.compose-form {
|
||||
&__buttons-wrapper {
|
||||
background: $column-header-color;
|
||||
|
||||
&.character-counter__wrapper {
|
||||
.character-counter { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__warning {
|
||||
background-color: $warning-card-color;
|
||||
}
|
||||
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
&__modifiers { background-color: $base-lighter1-color }
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
background-color: $base-lighter1-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.character-counter {
|
||||
color: $icon-color
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
&-subheading,
|
||||
&-link__badge {
|
||||
background: $base-color;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
&-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
background: transparent;
|
||||
|
||||
*[role="feed"] {
|
||||
article {
|
||||
margin: 1em 0;
|
||||
&:first-of-type { margin: 0 }
|
||||
|
||||
&:focus { outline: none }
|
||||
}
|
||||
}
|
||||
|
||||
div[tabindex="-1"] { margin-bottom: 1em }
|
||||
}
|
||||
|
||||
.notification__filter-bar {
|
||||
background: $column-header-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
button {
|
||||
color: $icon-color;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background: none center / contain no-repeat;
|
||||
background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// v2.9.0以降に対応
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
& {
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
& {
|
||||
border-top: 1px solid $base-separation-color;
|
||||
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.load {
|
||||
&-more,
|
||||
&-gap {
|
||||
background: transparent;
|
||||
|
||||
&:hover { background: darken($column-header-color, 10%) }
|
||||
}
|
||||
|
||||
&-gap { border: 0 }
|
||||
}
|
||||
|
||||
.confirmation-modal {
|
||||
@include material-card-radius;
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
&__action-bar {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
box-shadow: 0 2px 5px 0 transparent;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.floating-action-button {
|
||||
font-size: 24px;
|
||||
background-color: $active-color;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $floating-acton-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $active-button-color;
|
||||
|
||||
.text-icon-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.button--block { @include button-shadow }
|
||||
|
||||
.button-secondary {
|
||||
background-color: $primary-lighter1-text-color;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
&__modal {
|
||||
.media-modal {
|
||||
&__close.icon-button {
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($base-lighter1-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOM操作によりpaddingが調整できないもの
|
||||
.privacy-dropdown__value-icon.icon-button.inverted,
|
||||
.compose-form__poll-button-icon.icon-button.inverted,
|
||||
.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }
|
||||
@ -0,0 +1,38 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
//border: 1px solid $base-separation-color;
|
||||
//不要(?)
|
||||
|
||||
> a {
|
||||
@include status-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.card__bar {
|
||||
background: initial;
|
||||
|
||||
.display-name strong { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.card__img { background: $card-image-color }
|
||||
.card__bar {
|
||||
background: $card-color;
|
||||
|
||||
.avatar {
|
||||
img { background: transparent }
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong { color: $primary-text-color }
|
||||
span { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $column-header-color;
|
||||
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__separator { margin: 4px 0 }
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
.actions-modal {
|
||||
@include material-card-radius;
|
||||
|
||||
& > ul {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
padding: 16px 16px;
|
||||
background: $column-header-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__separator { border-bottom-color: $base-separation-color }
|
||||
}
|
||||
|
||||
& > li:not(:empty) {
|
||||
@extend .dropdown-menu__item;
|
||||
|
||||
a {
|
||||
padding: 12px 16px;
|
||||
color: $primary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: $base-lighter1-color;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-right: 16px;
|
||||
padding-left: 74px;
|
||||
|
||||
&__avatar {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.status-card {
|
||||
color: $primary-lighter1-text-color;
|
||||
&__title, &__description { color: $primary-lighter2-text-color }
|
||||
|
||||
&__image { background: transparent }
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'components-button';
|
||||
@import 'components-card';
|
||||
@import 'components-dropdown';
|
||||
@import 'components-status-card';
|
||||
@ -0,0 +1,68 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.emoji-mart {
|
||||
&-bar {
|
||||
border: 0 solid $base-separation-color;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-anchors {
|
||||
color: $icon-color;
|
||||
}
|
||||
&-anchor {
|
||||
&-selected {
|
||||
color: $icon-active-color;
|
||||
|
||||
&:hover {
|
||||
color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-bar {
|
||||
background-color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
&-search input {
|
||||
color: $primary-text-color;
|
||||
background-color: $form-color;
|
||||
border: 0px solid #ffffff00;
|
||||
}
|
||||
|
||||
&-category-label span {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&-scroll {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown {
|
||||
&__modifiers {
|
||||
&__menu {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
@include column-shadow;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
.page-header {
|
||||
background: $explore-header-color;
|
||||
|
||||
h1 { color: $primary-text-color }
|
||||
p { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.directory,
|
||||
.notice-widget { @include column-shadow; }
|
||||
|
||||
.directory {
|
||||
background: $explore-directory-color;
|
||||
|
||||
.accounts-table {
|
||||
&__count {
|
||||
color: $primary-lighter2-text-color;
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
& > a {
|
||||
@include status-shadow;
|
||||
background: $explore-directory-color;
|
||||
}
|
||||
|
||||
h4 { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.notice-widget {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $explore-directory-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
205
app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss
Normal file
205
app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.keyboard-shortcuts {
|
||||
kbd {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
border-color: $base-darker1-color;
|
||||
|
||||
margin: 0 0.25em;
|
||||
|
||||
&:first-child { margin-left: 0 }
|
||||
&:last-child { margin-right: 0 }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.column {
|
||||
.column-back-button { background: inherit }
|
||||
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
label input {
|
||||
color: $secondary-text-color;
|
||||
&:focus { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-inline-form ~ .scrollable {
|
||||
article { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
&:active, &:focus { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-editor {
|
||||
background: $base-color;
|
||||
h4 { background: $column-header-color }
|
||||
|
||||
.drawer__pager {
|
||||
.drawer__inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-adder {
|
||||
background: $base-color;
|
||||
|
||||
.column-inline-form { border-bottom: 1px solid $base-separation-color }
|
||||
|
||||
&__account,
|
||||
&__lists { background: $column-header-color }
|
||||
|
||||
&__lists {
|
||||
.list { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.notification {
|
||||
&.notification-favourite {
|
||||
.status {
|
||||
&.status-direct { background: transparent }
|
||||
}
|
||||
}
|
||||
|
||||
> .notification__message {
|
||||
color: $primary-lighter2-text-color;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
|
||||
.notification__display-name {
|
||||
&:hover { color: inherit }
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
.star-icon { color: $icon-active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
232
app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss
Normal file
232
app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss
Normal file
@ -0,0 +1,232 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
a.button {
|
||||
@include button-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-button {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-header {
|
||||
@include status-shadow;
|
||||
|
||||
&__image {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
@media screen and (min-width: 600px) { height: 500px }
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) { margin-top: -140px }
|
||||
|
||||
&::before { background: $base-lighter1-color }
|
||||
|
||||
.avatar {
|
||||
@media screen and (max-width: 600px) {
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
|
||||
display: initial;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
justify-content: center;
|
||||
flex: auto;
|
||||
|
||||
.spacer { display: none }
|
||||
|
||||
a.button.logo-button {
|
||||
color: $light-text-color;
|
||||
background: $secondary-text-color;
|
||||
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
|
||||
&#Mastodon { fill: $secondary-text-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-counters {
|
||||
.counter {
|
||||
color: $light-text-color;
|
||||
border-right: 0;
|
||||
|
||||
&::after { border-bottom-color: $base-color }
|
||||
|
||||
&.active {
|
||||
&::after { border-bottom-color: $active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
.public-account-bio {
|
||||
.account__header__content { text-align: center }
|
||||
}
|
||||
|
||||
&__links {
|
||||
color: $primary-text-color;
|
||||
|
||||
a {
|
||||
&, strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-bio,
|
||||
.endorsements-widget,
|
||||
.hero-widget { @include status-shadow; }
|
||||
|
||||
.public-account-bio {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.account__header__content { color: $primary-text-color }
|
||||
&__extra { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.endorsements-widget {
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
&__img { background: $base-color }
|
||||
&__text {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&, em { color: $primary-lighter2-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
a {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
box-shadow: none;
|
||||
|
||||
.entry {
|
||||
margin: 1em 0;
|
||||
background: transparent;
|
||||
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
.footer {
|
||||
h4 { color: $primary-lighter1-text-color }
|
||||
|
||||
ul {
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.brand {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.search {
|
||||
.search {
|
||||
&__input {
|
||||
@include material-border;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
|
||||
&__icon {
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
> .search-results {
|
||||
&__header { background: $base-color }
|
||||
&__section {
|
||||
> h5 { background: darken($base-color, 10%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends__item {
|
||||
background: $trend-color;
|
||||
|
||||
.trends__item {
|
||||
&__name a { color: $secondary-text-color }
|
||||
&__current { color: lighten($secondary-text-color, 10%) }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.edit_account {
|
||||
@media screen and (min-width: 415px) {
|
||||
.card {
|
||||
> a {
|
||||
position: relative;
|
||||
|
||||
.card__img {
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
.card__bar {
|
||||
position: static;
|
||||
padding-top: 30%;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
flex: auto;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.dashboard {
|
||||
&__counters {
|
||||
& > div {
|
||||
& > div, & > a { background: $dashboard-counters-base-color }
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $dashboard-counters-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text,
|
||||
&__num { color: $primary-text-color }
|
||||
|
||||
&__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__widgets {
|
||||
a:not(.name-tag) { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.admin-wrapper {
|
||||
.content {
|
||||
.directory__tag {
|
||||
& > a,
|
||||
& > div { background: $setting-base-color }
|
||||
|
||||
h4 {
|
||||
& { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.log-entry {
|
||||
.log-entry {
|
||||
&__header {
|
||||
color: $primary-lighter2-text-color;
|
||||
background: $log-entry-color;
|
||||
|
||||
.username,
|
||||
.target,
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
&__timestamp { color: $primary-lighter1-text-color }
|
||||
&__icon { color: $icon-color }
|
||||
|
||||
&__extras {
|
||||
color: $primary-text-color;
|
||||
background: $log-entry-extra-color;
|
||||
|
||||
.diff-neutral { color: $log-entry-extra--neutral-color }
|
||||
.diff-old { color: $log-entry-extra--old-color }
|
||||
.diff-new { color: $log-entry-extra--new-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.report-card {
|
||||
background: $setting-content-base-color;
|
||||
|
||||
&__profile__stats {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
a {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($primary-lighter2-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__item {
|
||||
border-top-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__icon { color: $icon-color }
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__row {
|
||||
&, &:nth-child(2n) { background: $base-lighter1-color }
|
||||
&:hover, &:nth-child(2n):hover { background: $column-header-hover-color }
|
||||
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&__content {
|
||||
.status__content { color: $primary-text-color }
|
||||
.detailed-status__meta { color: $primary-lighter1-text-color }
|
||||
|
||||
|
||||
.accounts-table { // v2.8.0 ->
|
||||
.accounts-table {
|
||||
&__count {
|
||||
& {color: $primary-text-color }
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
td .account { background: inherit }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
&__bubble { color: $primary-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
245
app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss
Normal file
245
app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss
Normal file
@ -0,0 +1,245 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'settings-account';
|
||||
@import 'settings-report';
|
||||
@import 'settings-log';
|
||||
@import 'settings-dashboard';
|
||||
@import 'settings-directory_tag';
|
||||
|
||||
|
||||
|
||||
body.admin {
|
||||
color: $primary-text-color;
|
||||
background: $setting-base-color;
|
||||
|
||||
.sidebar {
|
||||
&-wrapper { background: inherit }
|
||||
|
||||
ul {
|
||||
border-radius: 0;
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-hover-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-selected-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
@include material-icon-large;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
ul { background: darken($setting-base-color, 4%) }
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $icon-active-color;
|
||||
background: initial;
|
||||
|
||||
&:hover { background: $setting-lists-hover-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include column-shadow;
|
||||
background: $setting-content-base-color;
|
||||
|
||||
h2, h3, h4, h6 { color: $primary-text-color }
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
h2, h4, hr { border-bottom-color: $base-separation-color }
|
||||
.muted-hint { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.input {
|
||||
&.boolean,
|
||||
&.with_label,
|
||||
&.with_floating_label {
|
||||
.label_input > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.with_block_label {
|
||||
& > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.radio_buttons{
|
||||
.radio label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&-copy {
|
||||
background: $base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
|
||||
.check_boxes {
|
||||
.checkbox {
|
||||
label { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=number],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: $primary-text-color;
|
||||
background: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover {
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: darken($setting-content-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
color: $primary-text-color;
|
||||
background-color: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label,
|
||||
.error {
|
||||
color: $error-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hint, p.hint {
|
||||
color: $primary-lighter1-text-color !important;
|
||||
|
||||
code {
|
||||
color: $light-text-color;
|
||||
background: $setting-emphasis-color;
|
||||
}
|
||||
}
|
||||
|
||||
.recommended {
|
||||
color: $verified-color;
|
||||
background-color: transparentize($verified-color, 0.75);
|
||||
border-color: $verified-color;
|
||||
}
|
||||
|
||||
.label_input {
|
||||
&__append { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
button {
|
||||
@include button-shadow;
|
||||
background-color: $active-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning { background: change-color($color: $error-color, $alpha: 0.8) }
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page,
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.page {
|
||||
&.current {
|
||||
background: $icon-active-color;
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
.filter-subset {
|
||||
strong { color: $primary-text-color }
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&:hover { color: $primary-text-color }
|
||||
|
||||
&.selected {
|
||||
color: $active-text-color;
|
||||
border-bottom-color: $active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new_form_two_factor_confirmation {
|
||||
.qr-wrapper {
|
||||
.qr-code { box-shadow: none }
|
||||
.qr-alternative { color: $secondary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
select#user_setting_default_privacy {
|
||||
&[for=user_setting_default_privacy_public],
|
||||
&[for=user_setting_default_privacy_unlisted],
|
||||
option[value="public"],
|
||||
option[value="unlisted"] { color: $active-text-color !important }
|
||||
}
|
||||
|
||||
.column-header__collapsible__extra {
|
||||
.column-settings__section { color: $primary-text-color }
|
||||
|
||||
.setting-toggle {
|
||||
.react-toggle {
|
||||
&.react-toggle--checked {
|
||||
> .react-toggle-track { background: $setting-toggle-checked-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-checked-color;
|
||||
background-color: $setting-toggle-thumb-checked-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .react-toggle-track { background: $setting-toggle-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-color;
|
||||
background-color: $setting-toggle-thumb-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle__label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.setting-meta__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
123
app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss
Normal file
123
app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss
Normal file
@ -0,0 +1,123 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.status {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
border-bottom: 0;
|
||||
|
||||
transition: box-shadow 0.1s 0s ease-out;
|
||||
|
||||
&.light {
|
||||
.status {
|
||||
&__relative-time { color: $primary-lighter1-text-color }
|
||||
&__display-name {
|
||||
color: $primary-text-color;
|
||||
|
||||
.display-name__account { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.display-name strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
background: $status-direct-color;
|
||||
|
||||
&:not(.read) {
|
||||
background: inherit;
|
||||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.status__content {
|
||||
p { color: lighten($primary-text-color, 20%) }
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
&__info {
|
||||
.status__display-name {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.status__relative-time { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__action-bar__counter__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.detailed-status__datetime { color: $primary-lighter1-text-color }
|
||||
|
||||
.detailed-status__link {
|
||||
.fa.fa-star { vertical-align: middle }
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@include status-shadow;
|
||||
|
||||
.detailed-status { @extend .detailed-status; }
|
||||
.detailed-status__action-bar {
|
||||
background: $status-actionbar-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status,
|
||||
.detailed-status {
|
||||
background: $status-color;
|
||||
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card,
|
||||
a.status-card.compact {
|
||||
&:hover { background: initial }
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.status-card.compact {
|
||||
border-color: $non-elevated-card-boader;
|
||||
|
||||
&__title {
|
||||
color : $primary-text-color;
|
||||
}
|
||||
|
||||
&__host {
|
||||
color: $primary-lighter1-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name-tag,
|
||||
a.name-tag {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.table {
|
||||
thead th { border-bottom-color: $base-separation-color }
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td, & > th { background: darken($base-color, 4%) }
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
a.table-action-link,
|
||||
button.table-action-link {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover { color: darken($secondary-text-color, 8%) }
|
||||
}
|
||||
22
app/javascript/styles/gplus-theme-for-mastodon.scss
Normal file
22
app/javascript/styles/gplus-theme-for-mastodon.scss
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Google+ Theme for Mastodon v1.1
|
||||
* Copyright (C) 2018-2019 Genbu Project
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'application';
|
||||
@import 'gplus-theme-for-mastodon/basics';
|
||||
@import 'gplus-theme-for-mastodon/components';
|
||||
@import 'gplus-theme-for-mastodon/tables';
|
||||
@import 'gplus-theme-for-mastodon/columns';
|
||||
@import 'gplus-theme-for-mastodon/lists';
|
||||
@import 'gplus-theme-for-mastodon/accounts';
|
||||
@import 'gplus-theme-for-mastodon/statuses';
|
||||
@import 'gplus-theme-for-mastodon/notifications';
|
||||
@import 'gplus-theme-for-mastodon/searches';
|
||||
@import 'gplus-theme-for-mastodon/settings';
|
||||
@import 'gplus-theme-for-mastodon/icons';
|
||||
@import 'gplus-theme-for-mastodon/profile';
|
||||
@import 'gplus-theme-for-mastodon/about';
|
||||
@import 'gplus-theme-for-mastodon/explore';
|
||||
11
app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss
Normal file
11
app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
|
||||
@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
|
||||
@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
|
||||
@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
|
||||
@mixin material-border { border-radius: 4px }
|
||||
@ -0,0 +1,81 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
// Base colors
|
||||
$active-color: #db4437;
|
||||
$accent-color: #fbbc04;
|
||||
$valid-color: #4285f4;
|
||||
$error-color: #d50000;
|
||||
$checked-color: #4285f4;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
|
||||
// Text colors
|
||||
$primary-text-color: rgba(0, 0, 0, 0.87);
|
||||
$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
|
||||
$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
|
||||
$secondary-text-color: #2962ff;
|
||||
$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
|
||||
$light-text-color: #ffffff;
|
||||
$light-darker1-text-color: darken($light-text-color, 15%);
|
||||
$active-text-color: $active-color;
|
||||
$error-text-color: $error-color;
|
||||
|
||||
|
||||
// Icon colors
|
||||
$icon-color: #757575;
|
||||
$icon-active-color: $active-color;
|
||||
|
||||
|
||||
// Background colors
|
||||
$base-color: #f1f1f1;
|
||||
$base-lighter1-color: #ffffff;
|
||||
$base-darker1-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
$column-header-color: $base-lighter1-color;
|
||||
$column-header-hover-color: change-color($color: $column-header-color, $lightness: 90%);
|
||||
|
||||
$status-color: $base-lighter1-color;
|
||||
$status-direct-color: darken($status-color, 5%);
|
||||
$status-actionbar-color: change-color($color: $status-color, $lightness: 98%);
|
||||
|
||||
$account-color: $base-lighter1-color;
|
||||
$account-foreground-color: $base-darker1-color;
|
||||
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
$trend-color: $base-lighter1-color;
|
||||
|
||||
$setting-base-color: $base-color;
|
||||
$setting-lists-selected-color: darken($base-color, 2%);
|
||||
$setting-lists-hover-color: darken($base-color, 5%);
|
||||
$setting-content-base-color: $base-lighter1-color;
|
||||
|
||||
$setting-toggle-color: #b9b9b9;
|
||||
$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
|
||||
$setting-toggle-thumb-color: #fafafa;
|
||||
$setting-toggle-thumb-checked-color: $checked-color;
|
||||
|
||||
$dashboard-counters-base-color: $base-color;
|
||||
$dashboard-counters-hover-color: lighten($base-color, 2%);
|
||||
|
||||
$explore-header-color: lighten($accent-color, 16%);
|
||||
$explore-directory-color: $base-lighter1-color;
|
||||
|
||||
|
||||
// Shadow colors
|
||||
$column-header-shadow-color: rgba(0, 0, 0, 0.3);
|
||||
$status-shadow-color: rgba(0, 0, 0, 0.14);
|
||||
$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
|
||||
$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
|
||||
$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
|
||||
$button-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
||||
// Separation colors
|
||||
$base-separation-color: rgba(0, 0, 0, 0.14);
|
||||
138
app/javascript/styles/gplus-theme-for-mastodon/about.scss
Normal file
138
app/javascript/styles/gplus-theme-for-mastodon/about.scss
Normal file
@ -0,0 +1,138 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
// from mastodon/about.scss
|
||||
$column-breakpoint: 700px;
|
||||
|
||||
|
||||
|
||||
.landing-page {
|
||||
h3, h4, h5, h6 { color: $primary-lighter2-text-color }
|
||||
p { color: $primary-lighter1-text-color }
|
||||
em { color: $primary-text-color }
|
||||
|
||||
.column-0 { background: $base-darker1-color }
|
||||
.column-2 {
|
||||
.landing-page {
|
||||
&__information { padding: 0 }
|
||||
|
||||
&__short-description {
|
||||
& > .row:first-child {
|
||||
background: $base-darker1-color;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding-left: 40px; padding-right: 40px;
|
||||
&:last-child { padding-bottom: 45px }
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
padding-left: 20px; padding-right: 20px;
|
||||
&:last-child { padding-bottom: 25px }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__forms,
|
||||
&__information,
|
||||
&__call-to-action {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
&__forms {
|
||||
padding: 0;
|
||||
|
||||
& > *:first-child { margin: inherit }
|
||||
& > * { margin-left: 20px; margin-right: 20px; }
|
||||
|
||||
.brand { background: $base-darker1-color }
|
||||
|
||||
form {
|
||||
& > .input input {
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
}
|
||||
|
||||
.separator-or {
|
||||
margin-left: 20px; margin-right: 20px;
|
||||
|
||||
span {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
|
||||
.separator-or span { background: $base-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__information {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.contact-widget {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.contact-widget {
|
||||
&__mail {
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong { color: inherit }
|
||||
|
||||
.row:first-child {
|
||||
h1 small {
|
||||
color: $light-darker1-text-color;
|
||||
|
||||
span { color: $light-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__call-to-action {
|
||||
.row__information-board {
|
||||
.information-board__section {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
& > span:last-child { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
.features-list {
|
||||
.features-list__row {
|
||||
.text { color: $primary-lighter1-text-color }
|
||||
.visual .fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer { color: $primary-lighter1-text-color }
|
||||
|
||||
#mastodon-timeline {
|
||||
color: $primary-text-color;
|
||||
background: transparent;
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
109
app/javascript/styles/gplus-theme-for-mastodon/accounts.scss
Normal file
109
app/javascript/styles/gplus-theme-for-mastodon/accounts.scss
Normal file
@ -0,0 +1,109 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.account {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
.account {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
> .column-back-button {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account-timeline__header {
|
||||
.account__header {
|
||||
background-color: $account-foreground-color;
|
||||
|
||||
> div { background-color: inherit }
|
||||
|
||||
.account__header {
|
||||
&__username { color: $secondary-lighter1-text-color }
|
||||
&__fields { @extend .account__header__fields; }
|
||||
}
|
||||
|
||||
.account--action-button {
|
||||
.icon-button:not(.active) {
|
||||
color: darken($light-text-color, 7%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
&__disclaimer,
|
||||
&__action-bar,
|
||||
&__section-headline {
|
||||
background: $column-header-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__action-bar {
|
||||
&__tab {
|
||||
border-color: $base-separation-color;
|
||||
&.active { border-bottom-color: $active-color }
|
||||
|
||||
> span { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
dl {
|
||||
border-color: $base-separation-color;
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $primary-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
&.verified {
|
||||
border-color: transparentize($valid-color, 0.5);
|
||||
background: transparentize($valid-color, 0.75);
|
||||
|
||||
a { color: lighten($verified-color, 20%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account__action-bar__tab {
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
47
app/javascript/styles/gplus-theme-for-mastodon/basics.scss
Normal file
47
app/javascript/styles/gplus-theme-for-mastodon/basics.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
body {
|
||||
&,
|
||||
.ui {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
background: inherit;
|
||||
|
||||
.status {
|
||||
@include status-focus-shadow;
|
||||
|
||||
&.status-direct { background: $status-direct-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
& { background: $status-color }
|
||||
&__action-bar { background: $status-actionbar-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: darken($base-lighter1-color, 12%);
|
||||
|
||||
&:hover { background: darken($base-lighter1-color, 16%) }
|
||||
&:active { background: darken($base-lighter1-color, 12%) }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $base-color;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
197
app/javascript/styles/gplus-theme-for-mastodon/columns.scss
Normal file
197
app/javascript/styles/gplus-theme-for-mastodon/columns.scss
Normal file
@ -0,0 +1,197 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.tabs-bar {
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
color: $icon-color;
|
||||
|
||||
.fa { vertical-align: top }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.drawer {
|
||||
&__header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.drawer__tab { color: $icon-color }
|
||||
|
||||
a {
|
||||
&:hover { background: $column-header-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__pager {
|
||||
@include status-shadow;
|
||||
|
||||
.drawer__inner {
|
||||
background: $column-header-color;
|
||||
|
||||
&__mastodon { display: none }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
color: $secondary-text-color;
|
||||
background: $column-header-color;
|
||||
|
||||
.navigation-bar {
|
||||
&__profile {
|
||||
strong { color: $primary-text-color }
|
||||
&-edit { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
.compose-form {
|
||||
&__buttons-wrapper { background: $column-header-color }
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
color: $icon-color;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: unset }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
&__icon { vertical-align: unset }
|
||||
}
|
||||
|
||||
.column {
|
||||
&-subheading { background: darken($base-color, 10%) }
|
||||
|
||||
&-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
|
||||
&__icon {
|
||||
color: $icon-color;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
background: transparent;
|
||||
|
||||
*[role="feed"] {
|
||||
article {
|
||||
margin: 1em 0;
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
div[tabindex="-1"] { margin-bottom: 1em }
|
||||
}
|
||||
|
||||
.notification__filter-bar {
|
||||
background: $column-header-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
button {
|
||||
color: $icon-color;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background: none center / contain no-repeat;
|
||||
background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
& {
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
& {
|
||||
border-top: 1px solid $base-separation-color;
|
||||
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.load {
|
||||
&-more,
|
||||
&-gap {
|
||||
background: transparent;
|
||||
|
||||
&:hover { background: darken($column-header-color, 10%) }
|
||||
}
|
||||
|
||||
&-gap { border: 0 }
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.floating-action-button {
|
||||
font-size: 24px;
|
||||
background: $active-color;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
border: 1px solid $base-separation-color;
|
||||
|
||||
> a {
|
||||
@include status-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.card__bar {
|
||||
background: initial;
|
||||
|
||||
.display-name strong { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.card__img { background: $card-image-color }
|
||||
.card__bar {
|
||||
background: $card-color;
|
||||
|
||||
.avatar {
|
||||
img { background: transparent }
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong { color: $primary-text-color }
|
||||
span { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.dropdown-menu,
|
||||
.actions-modal > ul {
|
||||
@include material-border;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
padding: 8px 16px;
|
||||
background: $column-header-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__separator { border-bottom-color: $base-separation-color }
|
||||
}
|
||||
|
||||
& > li:not(:empty) {
|
||||
@extend .dropdown-menu__item;
|
||||
|
||||
a { padding: 12px 16px }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'components-button';
|
||||
@import 'components-card';
|
||||
@import 'components-dropdown';
|
||||
38
app/javascript/styles/gplus-theme-for-mastodon/explore.scss
Normal file
38
app/javascript/styles/gplus-theme-for-mastodon/explore.scss
Normal file
@ -0,0 +1,38 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
.page-header {
|
||||
background: $explore-header-color;
|
||||
|
||||
h1 { color: $primary-text-color }
|
||||
p { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.directory {
|
||||
background: $explore-directory-color;
|
||||
|
||||
.accounts-table {
|
||||
&__count {
|
||||
color: $primary-lighter2-text-color;
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
a { background: $explore-directory-color }
|
||||
h4 { color: $primary-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.notice-widget {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $explore-directory-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
97
app/javascript/styles/gplus-theme-for-mastodon/icons.scss
Normal file
97
app/javascript/styles/gplus-theme-for-mastodon/icons.scss
Normal file
File diff suppressed because one or more lines are too long
34
app/javascript/styles/gplus-theme-for-mastodon/lists.scss
Normal file
34
app/javascript/styles/gplus-theme-for-mastodon/lists.scss
Normal file
@ -0,0 +1,34 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.column {
|
||||
.column-back-button { background: inherit }
|
||||
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
label input {
|
||||
color: $secondary-text-color;
|
||||
&:focus { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-inline-form ~ .scrollable {
|
||||
article { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
.list-editor {
|
||||
background: $base-color;
|
||||
|
||||
h4 { background: $column-header-color }
|
||||
|
||||
.drawer__pager {
|
||||
.drawer__inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.notification {
|
||||
&.notification-favourite {
|
||||
.status {
|
||||
&.status-direct { background: transparent }
|
||||
}
|
||||
}
|
||||
|
||||
> .notification__message {
|
||||
color: $primary-lighter2-text-color;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
|
||||
.notification__display-name {
|
||||
&:hover { color: inherit }
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
.star-icon { color: $icon-active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
231
app/javascript/styles/gplus-theme-for-mastodon/profile.scss
Normal file
231
app/javascript/styles/gplus-theme-for-mastodon/profile.scss
Normal file
@ -0,0 +1,231 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
a.button {
|
||||
@include button-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-button {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&:last-child { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-header {
|
||||
@include status-shadow;
|
||||
|
||||
&__image {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
@media screen and (min-width: 600px) { height: 500px }
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) { margin-top: -140px }
|
||||
|
||||
&::before { background: $base-lighter1-color }
|
||||
|
||||
.avatar {
|
||||
@media screen and (max-width: 600px) {
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
|
||||
display: initial;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
justify-content: center;
|
||||
flex: auto;
|
||||
|
||||
.spacer { display: none }
|
||||
|
||||
a.button.logo-button {
|
||||
color: $light-text-color;
|
||||
background: $secondary-text-color;
|
||||
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
|
||||
&:last-child { fill: $secondary-text-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-counters {
|
||||
.counter {
|
||||
color: $light-text-color;
|
||||
border-right: 0;
|
||||
|
||||
&::after { border-bottom-color: $base-color }
|
||||
|
||||
&.active {
|
||||
&::after { border-bottom-color: $active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
.public-account-bio {
|
||||
.account__header__content { text-align: center }
|
||||
}
|
||||
|
||||
&__links {
|
||||
color: $primary-text-color;
|
||||
|
||||
a {
|
||||
&, strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-bio {
|
||||
@include column-shadow;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.account__header__content { color: $primary-text-color }
|
||||
&__extra { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.endorsements-widget {
|
||||
@include column-shadow;
|
||||
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
@include column-shadow;
|
||||
|
||||
&__img { background: $base-color }
|
||||
&__text {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&, em { color: $primary-lighter2-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
a {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
box-shadow: none;
|
||||
|
||||
.entry {
|
||||
margin: 1em 0;
|
||||
background: transparent;
|
||||
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
.footer {
|
||||
h4 { color: $primary-lighter1-text-color }
|
||||
|
||||
ul {
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.brand {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&:last-child { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
41
app/javascript/styles/gplus-theme-for-mastodon/searches.scss
Normal file
41
app/javascript/styles/gplus-theme-for-mastodon/searches.scss
Normal file
@ -0,0 +1,41 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.search {
|
||||
.search {
|
||||
&__input {
|
||||
@include material-border;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
|
||||
&__icon {
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
> .search-results {
|
||||
&__header { background: $base-color }
|
||||
&__section {
|
||||
> h5 { background: darken($base-color, 10%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends__item {
|
||||
background: $trend-color;
|
||||
|
||||
.trends__item {
|
||||
&__name a { color: $secondary-text-color }
|
||||
&__current { color: lighten($secondary-text-color, 10%) }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.edit_account {
|
||||
@media screen and (min-width: 415px) {
|
||||
.card {
|
||||
> a {
|
||||
position: relative;
|
||||
|
||||
.card__img { border-bottom: 1px solid $base-separation-color }
|
||||
.card__bar {
|
||||
position: static;
|
||||
padding-top: 30%;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
flex: auto;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.dashboard {
|
||||
&__counters {
|
||||
& > div {
|
||||
& > div, & > a { background: $dashboard-counters-base-color }
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $dashboard-counters-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__num { color: $primary-text-color }
|
||||
&__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__widgets {
|
||||
a:not(.name-tag) { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.report-card {
|
||||
background: $setting-content-base-color;
|
||||
|
||||
&__profile__stats {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
a {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($primary-lighter2-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__item {
|
||||
border-top-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__icon { color: $icon-color }
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__row {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__content {
|
||||
.status__content { color: $primary-text-color }
|
||||
.detailed-status__meta { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
&__bubble { color: $primary-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
208
app/javascript/styles/gplus-theme-for-mastodon/settings.scss
Normal file
208
app/javascript/styles/gplus-theme-for-mastodon/settings.scss
Normal file
@ -0,0 +1,208 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'settings-account';
|
||||
@import 'settings-report';
|
||||
@import 'settings-dashboard';
|
||||
|
||||
|
||||
|
||||
body.admin {
|
||||
color: $primary-text-color;
|
||||
background: $setting-base-color;
|
||||
|
||||
.sidebar {
|
||||
&-wrapper { background: inherit }
|
||||
|
||||
ul {
|
||||
border-radius: 0;
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-hover-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-selected-color;
|
||||
}
|
||||
}
|
||||
|
||||
ul { background: darken($setting-base-color, 4%) }
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $icon-active-color;
|
||||
background: initial;
|
||||
|
||||
&:hover { background: $setting-lists-hover-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include column-shadow;
|
||||
background: $setting-content-base-color;
|
||||
|
||||
h2, h3, h4, h6 { color: $primary-text-color }
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
h2, h4, hr { border-bottom-color: $base-separation-color }
|
||||
.muted-hint { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.input {
|
||||
&.boolean,
|
||||
&.with_label,
|
||||
&.with_floating_label {
|
||||
.label_input > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.with_block_label {
|
||||
& > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.radio_buttons{
|
||||
.radio label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&-copy { background: $base-color }
|
||||
}
|
||||
|
||||
.check_boxes {
|
||||
.checkbox {
|
||||
label { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=number],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: $primary-text-color;
|
||||
background: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover {
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: darken($setting-content-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
color: $primary-text-color;
|
||||
background-color: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label,
|
||||
.error {
|
||||
color: $error-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hint, p.hint { color: $primary-lighter1-text-color !important }
|
||||
|
||||
.label_input {
|
||||
&__append { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning { background: change-color($color: $error-color, $alpha: 0.8) }
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page,
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.page {
|
||||
&.current {
|
||||
background: $icon-active-color;
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
.filter-subset {
|
||||
strong { color: $primary-text-color }
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&:hover { color: $primary-text-color }
|
||||
|
||||
&.selected {
|
||||
color: $active-text-color;
|
||||
border-bottom-color: $active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
&[for=user_setting_default_privacy_public],
|
||||
&[for=user_setting_default_privacy_unlisted] {
|
||||
color: $active-text-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header__collapsible__extra {
|
||||
.column-settings__section { color: $primary-text-color }
|
||||
|
||||
.setting-toggle {
|
||||
.react-toggle {
|
||||
&.react-toggle--checked {
|
||||
> .react-toggle-track { background: $setting-toggle-checked-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-checked-color;
|
||||
background-color: $setting-toggle-thumb-checked-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .react-toggle-track { background: $setting-toggle-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-color;
|
||||
background-color: $setting-toggle-thumb-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle__label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.setting-meta__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
107
app/javascript/styles/gplus-theme-for-mastodon/statuses.scss
Normal file
107
app/javascript/styles/gplus-theme-for-mastodon/statuses.scss
Normal file
@ -0,0 +1,107 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.status {
|
||||
@include status-shadow;
|
||||
border-bottom: 0;
|
||||
|
||||
transition: box-shadow 0.1s 0s ease-out;
|
||||
|
||||
&.light {
|
||||
.status {
|
||||
&__relative-time { color: $primary-lighter1-text-color }
|
||||
&__display-name {
|
||||
color: $primary-text-color;
|
||||
|
||||
.display-name__account { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
background: $status-direct-color;
|
||||
|
||||
&:not(.read) {
|
||||
background: inherit;
|
||||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.status__content {
|
||||
p { color: lighten($primary-text-color, 20%) }
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
&__info {
|
||||
.status__display-name {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.status__relative-time { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
.detailed-status {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.detailed-status__datetime { color: $primary-lighter1-text-color }
|
||||
|
||||
.detailed-status__link {
|
||||
.fa.fa-star { vertical-align: middle }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@include status-shadow;
|
||||
|
||||
.detailed-status { @extend .detailed-status; }
|
||||
.detailed-status__action-bar {
|
||||
background: $status-actionbar-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status,
|
||||
.detailed-status {
|
||||
background: $status-color;
|
||||
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card,
|
||||
a.status-card.compact {
|
||||
&:hover { background: initial }
|
||||
}
|
||||
|
||||
.name-tag,
|
||||
a.name-tag {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
29
app/javascript/styles/gplus-theme-for-mastodon/tables.scss
Normal file
29
app/javascript/styles/gplus-theme-for-mastodon/tables.scss
Normal file
@ -0,0 +1,29 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.table {
|
||||
thead th { border-bottom-color: $base-separation-color }
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td, & > th { background: darken($base-color, 4%) }
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
a.table-action-link,
|
||||
button.table-action-link {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover { color: darken($secondary-text-color, 8%) }
|
||||
}
|
||||
266
app/javascript/styles/markdown.scss
Normal file
266
app/javascript/styles/markdown.scss
Normal file
@ -0,0 +1,266 @@
|
||||
.status__content {
|
||||
|
||||
font-family: inherit;
|
||||
|
||||
h1{
|
||||
color: #ec840d;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
padding: 0.5em;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
background: #dbebf8;
|
||||
vertical-align: middle;
|
||||
border-radius: 25px 25px 25px 25px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px #ff0000;
|
||||
}
|
||||
|
||||
h2{
|
||||
color: #ec840d;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
padding: 0.5em;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
background: #dbebf8;
|
||||
vertical-align: middle;
|
||||
border-radius: 25px 25px 25px 25px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px #fffb00;
|
||||
}
|
||||
|
||||
h3{
|
||||
color: #ec840d;
|
||||
font-weight: bold;
|
||||
font-size: 1.4em;
|
||||
padding: 0.5em;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
background: #dbebf8;
|
||||
vertical-align: middle;
|
||||
border-radius: 25px 25px 25px 25px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px #2bff00;
|
||||
}
|
||||
|
||||
h4{
|
||||
color: #ec840d;
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
padding: 0.5em;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
background: #dbebf8;
|
||||
vertical-align: middle;
|
||||
border-radius: 25px 25px 25px 25px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px #00ffea;
|
||||
}
|
||||
|
||||
h5{
|
||||
color: #ec840d;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
padding: 0.5em;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
background: #dbebf8;
|
||||
vertical-align: middle;
|
||||
border-radius: 25px 25px 25px 25px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px #0004ff;
|
||||
}
|
||||
|
||||
h6{
|
||||
color: #ec840d;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
padding: 0.5em;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
background: #dbebf8;
|
||||
vertical-align: middle;
|
||||
border-radius: 25px 25px 25px 25px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px #7700ff;
|
||||
}
|
||||
|
||||
em{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code{
|
||||
display: block;
|
||||
border-left: 2px solid;
|
||||
border-color: #079903;
|
||||
color: $white;
|
||||
padding-left: 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
background-color: #000000;
|
||||
|
||||
.positive{
|
||||
color: #5bda57;
|
||||
}
|
||||
|
||||
.negative{
|
||||
color: #ff4949;
|
||||
}
|
||||
|
||||
.rust-fanc{
|
||||
color: #ba7eff;
|
||||
}
|
||||
|
||||
.ruby-func{
|
||||
color: #24a8e6;
|
||||
}
|
||||
|
||||
.rust-macro{
|
||||
color: #d2ff6a;
|
||||
}
|
||||
|
||||
.contents{
|
||||
color: #ff9925;
|
||||
}
|
||||
}
|
||||
|
||||
pre{
|
||||
display: inline-block;
|
||||
font-family: 'Noto Sans Japanese', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p ~ blockquote {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
padding-left: 8px;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-base-color;
|
||||
display: block;
|
||||
border-left: 4px solid $classic-highlight-color;
|
||||
}
|
||||
|
||||
ul.md-contents {
|
||||
border: double 4px #21b384;
|
||||
padding: 0.5em 1em 0.5em 2.3em;
|
||||
position: relative;
|
||||
}
|
||||
ul li.md-contents {
|
||||
line-height: 1.5;
|
||||
padding: 0.2em 0;
|
||||
list-style-type: none!important;
|
||||
}
|
||||
ul li.md-contents:before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f0a4";
|
||||
position: absolute;
|
||||
left : 1em;
|
||||
color: #21b384;
|
||||
}
|
||||
|
||||
ol.md-contents {
|
||||
border: double 4px #ff954f;
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
position: relative;
|
||||
list-style: inside decimal;
|
||||
}
|
||||
|
||||
ol li.md-contents {
|
||||
line-height: 1.5;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 2px 0px 0px 0px;
|
||||
border-style: dashed;
|
||||
border-color: #ff7676;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
p>a>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
a>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
p>a{
|
||||
color: #1FBFF9;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #1FBFF9;
|
||||
}
|
||||
|
||||
sup{
|
||||
font-size: 75.5%;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub{
|
||||
font-size: 75.5%;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
small{
|
||||
font-size: 50.0%;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
color: $classic-highlight-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table tr{
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
table th, table td{
|
||||
padding: 6px 13px;
|
||||
border: 1px solid $classic-highlight-color;
|
||||
}
|
||||
|
||||
table th{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table thead tr{
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
td, th{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span.img_FTL {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import 'mastodon-light/variables';
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
|
||||
@import 'markdown';
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user