Merge branch 'back-3.3.0' into v3.4.0rc1
This commit is contained in:
GitHub
commit
29894a6018
22
.github/dependabot.yml
vendored
22
.github/dependabot.yml
vendored
@ -1,22 +0,0 @@
|
||||
# To get started with Dependabot version updates, you'll need to specify which
|
||||
# package ecosystems to update and where the package manifests are located.
|
||||
# Please see the documentation for all configuration options:
|
||||
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: npm
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
open-pull-requests-limit: 99
|
||||
allow:
|
||||
- dependency-type: direct
|
||||
|
||||
- package-ecosystem: bundler
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
open-pull-requests-limit: 99
|
||||
allow:
|
||||
- dependency-type: direct
|
||||
2
Gemfile
2
Gemfile
@ -99,6 +99,8 @@ gem 'json-ld'
|
||||
gem 'json-ld-preloaded', '~> 3.1'
|
||||
gem 'rdf-normalize', '~> 0.4'
|
||||
|
||||
gem 'redcarpet', "~> 3.4.0"
|
||||
|
||||
group :development, :test do
|
||||
gem 'fabrication', '~> 2.22'
|
||||
gem 'fuubar', '~> 2.5'
|
||||
|
||||
@ -486,6 +486,14 @@ GEM
|
||||
rdf-normalize (0.4.0)
|
||||
rdf (~> 3.1)
|
||||
redis (4.2.5)
|
||||
redcarpet (3.4.0)
|
||||
redis-actionpack (5.2.0)
|
||||
actionpack (>= 5, < 7)
|
||||
redis-rack (>= 2.1.0, < 3)
|
||||
redis-store (>= 1.1.0, < 2)
|
||||
redis-activesupport (5.2.0)
|
||||
activesupport (>= 3, < 7)
|
||||
redis-store (>= 1.3, < 2)
|
||||
redis-namespace (1.8.1)
|
||||
redis (>= 3.0.4)
|
||||
regexp_parser (2.1.1)
|
||||
@ -762,6 +770,7 @@ DEPENDENCIES
|
||||
rails-i18n (~> 6.0)
|
||||
rails-settings-cached (~> 0.6)
|
||||
rdf-normalize (~> 0.4)
|
||||
redcarpet (~> 3.4.0)
|
||||
redis (~> 4.2)
|
||||
redis-namespace (~> 1.8)
|
||||
resolv (~> 0.1.0)
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class Api::V2::MediaController < Api::V1::MediaController
|
||||
end
|
||||
__END__
|
||||
class Api::V2::MediaController < Api::V1::MediaController
|
||||
def create
|
||||
@media_attachment = current_account.media_attachments.create!({ delay_processing: true }.merge(media_attachment_params))
|
||||
|
||||
BIN
app/javascript/fonts/MaterialIcons-Regular.ttf
Normal file
BIN
app/javascript/fonts/MaterialIcons-Regular.ttf
Normal file
Binary file not shown.
@ -1 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="#3088d4"/><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"/></svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 216.4 232" style="enable-background:new 0 0 216.4 232;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#92787D;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M211.8,139.1c-3.2,16.4-28.5,34.3-57.6,37.7c-15.2,1.8-30.1,3.5-46,2.7c-26-1.2-46.6-6.2-46.6-6.2
|
||||
c0,2.5,0.2,4.9,0.5,7.2c3.4,25.7,25.5,27.2,46.4,27.9c21.1,0.7,39.9-5.2,39.9-5.2l0.9,19.1c0,0-14.8,7.9-41.1,9.4
|
||||
c-14.5,0.8-32.5-0.4-53.5-5.9c-45.5-12-53.3-60.6-54.5-109.8c-0.4-14.6-0.1-28.4-0.1-39.9c0-50.3,33-65.1,33-65.1
|
||||
C49.7,3.5,78.2,0.2,107.9,0h0.7c29.7,0.2,58.2,3.5,74.8,11.1c0,0,33,14.8,33,65.1C216.4,76.2,216.8,113.3,211.8,139.1"/>
|
||||
<path class="st1" d="M177.5,80.1V141h-24.1V81.9c0-12.5-5.2-18.8-15.7-18.8c-11.6,0-17.4,7.5-17.4,22.4v32.4h-24V85.4
|
||||
c0-14.8-5.8-22.4-17.4-22.4C68.3,63.1,63,69.4,63,81.9V141H38.9V80.1c0-12.5,3.2-22.4,9.5-29.7c6.6-7.3,15.2-11.1,25.8-11.1
|
||||
c12.4,0,21.7,4.7,27.9,14.2l6,10.1l6-10.1c6.2-9.5,15.5-14.2,27.9-14.2c10.7,0,19.3,3.8,25.9,11.1C174.3,57.7,177.5,67.6,177.5,80.1
|
||||
"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1 +1,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.41507 232.00976"><path d="M211.80683 139.0875c-3.1825 16.36625-28.4925 34.2775-57.5625 37.74875-15.16 1.80875-30.0825 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.3925 27.9425 21.115.7225 39.91625-5.20625 39.91625-5.20625l.86875 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23183 213.82 1.40558 165.31125.20808 116.09125c-.36375-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67058 3.45375 78.20308.2425 107.86433 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.97625 14.7525 32.97625 65.0825 0 0 .4125 37.13375-4.6 62.915" fill="#3088d4"/><path d="M65.68743 96.45938c0 9.01375-7.3075 16.32125-16.3225 16.32125-9.01375 0-16.32-7.3075-16.32-16.32125 0-9.01375 7.30625-16.3225 16.32-16.3225 9.015 0 16.3225 7.30875 16.3225 16.3225M124.52893 96.45938c0 9.01375-7.30875 16.32125-16.3225 16.32125-9.01375 0-16.32125-7.3075-16.32125-16.32125 0-9.01375 7.3075-16.3225 16.32125-16.3225 9.01375 0 16.3225 7.30875 16.3225 16.3225M183.36933 96.45938c0 9.01375-7.3075 16.32125-16.32125 16.32125-9.01375 0-16.32125-7.3075-16.32125-16.32125 0-9.01375 7.3075-16.3225 16.32125-16.3225 9.01375 0 16.32125 7.30875 16.32125 16.3225" fill="#fff"/></svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 216.4 232" style="enable-background:new 0 0 216.4 232;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#92787D;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M211.8,139.1c-3.2,16.4-28.5,34.3-57.6,37.7c-15.2,1.8-30.1,3.5-46,2.7c-26-1.2-46.6-6.2-46.6-6.2
|
||||
c0,2.5,0.2,4.9,0.5,7.2c3.4,25.7,25.5,27.2,46.4,27.9c21.1,0.7,39.9-5.2,39.9-5.2l0.9,19.1c0,0-14.8,7.9-41.1,9.4
|
||||
c-14.5,0.8-32.5-0.4-53.5-5.9c-45.5-12-53.3-60.6-54.5-109.8c-0.4-14.6-0.1-28.4-0.1-39.9c0-50.3,33-65.1,33-65.1
|
||||
C49.7,3.5,78.2,0.2,107.9,0h0.7c29.7,0.2,58.2,3.5,74.8,11.1c0,0,33,14.8,33,65.1C216.4,76.2,216.8,113.3,211.8,139.1"/>
|
||||
<path class="st1" d="M65.7,96.5c0,9-7.3,16.3-16.3,16.3c-9,0-16.3-7.3-16.3-16.3s7.3-16.3,16.3-16.3C58.4,80.1,65.7,87.4,65.7,96.5
|
||||
M124.5,96.5c0,9-7.3,16.3-16.3,16.3s-16.3-7.3-16.3-16.3s7.3-16.3,16.3-16.3S124.5,87.4,124.5,96.5 M183.4,96.5
|
||||
c0,9-7.3,16.3-16.3,16.3c-9,0-16.3-7.3-16.3-16.3S158,80.1,167,80.1C176.1,80.1,183.4,87.4,183.4,96.5"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
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;
|
||||
@ -121,6 +121,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');
|
||||
}
|
||||
@ -328,6 +336,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
<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
|
||||
|
||||
@ -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
|
||||
@ -60,7 +65,9 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
onPickEmoji: PropTypes.func.isRequired,
|
||||
showSearch: PropTypes.bool,
|
||||
anyMedia: PropTypes.bool,
|
||||
singleColumn: PropTypes.bool,
|
||||
singleColumn: PropTypes.bool,
|
||||
onGojiSubmit: PropTypes.func.isRequired,
|
||||
onHarukinSubmit: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
@ -86,7 +93,7 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
const fulltext = this.getFulltextForCharacterCounting();
|
||||
const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0;
|
||||
|
||||
return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (isOnlyWhitespace && !anyMedia));
|
||||
return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 2048 || (isOnlyWhitespace && !anyMedia));
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
@ -193,6 +200,10 @@ 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 } = this.props;
|
||||
const disabled = this.props.isSubmitting;
|
||||
@ -257,11 +268,22 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
<PrivacyDropdownContainer />
|
||||
<SpoilerButtonContainer />
|
||||
</div>
|
||||
<div className='character-counter__wrapper'><CharacterCounter max={500} text={this.getFulltextForCharacterCounting()} /></div>
|
||||
<div className='character-counter__wrapper'><CharacterCounter max={2048} text={this.getFulltextForCharacterCounting()} /></div>
|
||||
</div>
|
||||
|
||||
<div className='compose-form__publish'>
|
||||
<div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={!this.canSubmit()} block /></div>
|
||||
<div className='compose-form__publish-button-wrapper'>
|
||||
|
||||
<Button text={publishText} onClick={this.handleSubmit} disabled={!this.canSubmit()} 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']),
|
||||
@ -60,6 +65,18 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
onPickEmoji (position, data, needsSpace) {
|
||||
dispatch(insertEmojiCompose(position, data, needsSpace));
|
||||
},
|
||||
|
||||
onRisaSubmit (textarea) {
|
||||
dispatch(submitRisa(textarea));
|
||||
},
|
||||
|
||||
onGojiSubmit (textarea) {
|
||||
dispatch(submitGoji(textarea));
|
||||
},
|
||||
|
||||
onHarukinSubmit (textarea) {
|
||||
dispatch(submitHarukin(textarea));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -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' },
|
||||
@ -107,9 +108,10 @@ class GettingStarted extends ImmutablePureComponent {
|
||||
if (profile_directory) {
|
||||
navItems.push(
|
||||
<ColumnLink key='directory' icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
|
||||
<ColumnLink key='infomation' icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
|
||||
);
|
||||
|
||||
height += 48;
|
||||
height += 48*2;
|
||||
}
|
||||
|
||||
navItems.push(
|
||||
@ -120,9 +122,10 @@ class GettingStarted extends ImmutablePureComponent {
|
||||
} else if (profile_directory) {
|
||||
navItems.push(
|
||||
<ColumnLink key='directory' icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
|
||||
<ColumnLink key='infomation' icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
|
||||
);
|
||||
|
||||
height += 48;
|
||||
height += 48*2;
|
||||
}
|
||||
|
||||
if (multiColumn && !columns.find(item => item.get('id') === 'HOME')) {
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
"column.lists": "リスト",
|
||||
"column.mutes": "ミュートしたユーザー",
|
||||
"column.notifications": "通知",
|
||||
"column.pins": "固定されたトゥート",
|
||||
"column.pins": "固定された投稿",
|
||||
"column.public": "連合タイムライン",
|
||||
"column_back_button.label": "戻る",
|
||||
"column_header.hide_settings": "設定を隠す",
|
||||
@ -90,7 +90,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}",
|
||||
@ -105,6 +105,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": "ブロック",
|
||||
@ -190,7 +192,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} を除く)",
|
||||
@ -200,6 +203,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": "返信表示",
|
||||
@ -281,7 +285,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": "ログアウト",
|
||||
@ -291,7 +296,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}さんがあなたに返信しました",
|
||||
@ -351,6 +361,7 @@
|
||||
"privacy.unlisted.long": "誰でも閲覧可、公開TLに非表示",
|
||||
"privacy.unlisted.short": "未収載",
|
||||
"refresh": "更新",
|
||||
"qr_modal.description": "QRコードを読み取って簡単にプロフィールにアクセスしましょう。",
|
||||
"regeneration_indicator.label": "読み込み中…",
|
||||
"regeneration_indicator.sublabel": "ホームタイムラインは準備中です！",
|
||||
"relative_time.days": "{number}日前",
|
||||
@ -422,6 +433,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';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
2
app/javascript/styles/mastodon-auto.scss
Normal file
2
app/javascript/styles/mastodon-auto.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@use 'application';
|
||||
@media (prefers-color-scheme: light) { @import 'mastodon-light'; }
|
||||
@ -1,3 +1,5 @@
|
||||
@import 'mastodon-light/variables';
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
|
||||
@import 'markdown';
|
||||
|
||||
2
app/javascript/styles/mastodon-material-auto.scss
Normal file
2
app/javascript/styles/mastodon-material-auto.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@use 'mastodon-material-dark';
|
||||
@media (prefers-color-scheme: light) { @import 'mastodon-material-light'; }
|
||||
2
app/javascript/styles/mastodon-material-dark.scss
Normal file
2
app/javascript/styles/mastodon-material-dark.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'application';
|
||||
@import 'mastodon-material/profiles/mastodon-material-dark/loader';
|
||||
2
app/javascript/styles/mastodon-material-light.scss
Normal file
2
app/javascript/styles/mastodon-material-light.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'application';
|
||||
@import 'mastodon-material/profiles/mastodon-material-light/loader';
|
||||
154
app/javascript/styles/mastodon-material/color/black.scss
Normal file
154
app/javascript/styles/mastodon-material/color/black.scss
Normal file
@ -0,0 +1,154 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: dark;
|
||||
|
||||
// Base color
|
||||
$primary-color: #4285f4;
|
||||
$secondary-color: #db4437;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #ffffff;
|
||||
$secondary-text-color: #9aa0a6;
|
||||
$ui-text-color: #e8eaed;
|
||||
$inverted-text-color: #000000;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #9aa0a6;
|
||||
$tips-text-color: #c0c0c0;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #000000;
|
||||
$menu-bg-color: #121212;
|
||||
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
|
||||
$menu-bg-active-color: lighten($menu-bg-color, 10%);
|
||||
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
|
||||
$card-bg-color: #121212;
|
||||
$card-bg-hover-color: lighten($card-bg-color, 6%);
|
||||
$list-bg-color: #000000;
|
||||
$list-bg-hover-color: lighten($list-bg-color, 6%);
|
||||
$list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: lighten($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #121212;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #e2e2e3;
|
||||
$icon-hover-color: #ffffff;
|
||||
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
|
||||
$icon-bg-active-color: transparentize(#ffffff, 0.7);
|
||||
$disabled-icon-color: darken($icon-color, 16%);
|
||||
$top-bar-icon-color: $icon-color;
|
||||
$top-bar-icon-hover-color: $icon-hover-color;
|
||||
$top-bar-icon-active-color: $primary-color;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #1e1e1e;
|
||||
$border-hover-color: lighten($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: lighten($bg-color, 20%);
|
||||
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
|
||||
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: #1e1e1e;
|
||||
$search-bar-color: lighten($top-bar-color, 6%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: $top-bar-color;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $ui-text-color;
|
||||
$text-tab-bg-color: #121212;
|
||||
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
154
app/javascript/styles/mastodon-material/color/mastodon-dark.scss
Normal file
154
app/javascript/styles/mastodon-material/color/mastodon-dark.scss
Normal file
@ -0,0 +1,154 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: dark;
|
||||
|
||||
// Base color
|
||||
$primary-color: #2b90d9;
|
||||
$secondary-color: #2b90d9;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #ffffff;
|
||||
$secondary-text-color: #9baec8;
|
||||
$ui-text-color: #fff;
|
||||
$inverted-text-color: #000000;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #606984;
|
||||
$tips-text-color: #6d7889;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #4ea2df;
|
||||
$menu-text-color: #282c37;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #191b22;
|
||||
$menu-bg-color: #d9e1e8;
|
||||
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
|
||||
$menu-bg-active-color: lighten($menu-bg-color, 10%);
|
||||
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
|
||||
$card-bg-color: #313543;
|
||||
$card-bg-hover-color: lighten($card-bg-color, 6%);
|
||||
$list-bg-color: #282c37;
|
||||
$list-bg-hover-color: lighten($list-bg-color, 6%);
|
||||
$list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: lighten($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #42485a;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #393f4f;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#42485a, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #9baec8;
|
||||
$icon-hover-color: lighten($icon-color, 30%);
|
||||
$icon-bg-hover-color: lighten($bg-color, 14%);
|
||||
$icon-bg-active-color: lighten($bg-color, 18%);
|
||||
$disabled-icon-color: lighten($icon-color, 16%);
|
||||
$top-bar-icon-color: #fff;
|
||||
$top-bar-icon-hover-color: $icon-hover-color;
|
||||
$top-bar-icon-active-color: $icon-hover-color;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.7);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.6);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($primary-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #393f4f;
|
||||
$border-hover-color: lighten($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: lighten($bg-color, 16%);
|
||||
$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
|
||||
$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: #313543;
|
||||
$search-bar-color: lighten($top-bar-color, 6%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: #d9e1e8;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: #1f232b;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $tab-indicator-color;
|
||||
$text-tab-indicator-active-color: $tab-indicator-active-color;
|
||||
$text-tab-bg-color: $tab-bg-color;
|
||||
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -0,0 +1,153 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: light;
|
||||
|
||||
// Base color
|
||||
$primary-color: #2b90d9;
|
||||
$secondary-color: #2b90d9;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #000000;
|
||||
$secondary-text-color: #5f6368;
|
||||
$ui-text-color: #202124;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #5e5e5e;
|
||||
$tips-text-color: #c0c0c0;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #217aba;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #eff3f5;
|
||||
$menu-bg-color: $bg-color;
|
||||
$menu-bg-hover-color: darken($bg-color, 6%);
|
||||
$menu-bg-active-color: darken($bg-color, 10%);
|
||||
$menu-bg-active-hover-color: darken($bg-color, 16%);
|
||||
$card-bg-color: #ffffff;
|
||||
$card-bg-hover-color: darken($card-bg-color, 6%);
|
||||
$list-bg-color: #ffffff;
|
||||
$list-bg-hover-color: darken($list-bg-color, 6%);
|
||||
$list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: darken($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: darken($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #282c37;
|
||||
$icon-hover-color: darken($icon-color, 30%);
|
||||
$icon-bg-hover-color: darken($bg-color, 4%);
|
||||
$icon-bg-active-color: darken($bg-color, 8%);
|
||||
$disabled-icon-color: lighten($icon-color, 16%);
|
||||
$top-bar-icon-color: $icon-color;
|
||||
$top-bar-icon-hover-color: $icon-hover-color;
|
||||
$top-bar-icon-active-color: $icon-hover-color;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: lighten($text-button-color, 36%);
|
||||
$text-button-focus-color: lighten($text-button-color, 30%);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: $primary-color;
|
||||
$toggle-track-active-color: lighten($primary-color, 26%);
|
||||
|
||||
// Border color
|
||||
$border-color: #dadce0;
|
||||
$border-hover-color: darken($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: #ccd7e0;
|
||||
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: #ffffff;
|
||||
$search-bar-color: #d9e1e8;
|
||||
$search-bar-focus-color: $bg-color;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: #282c37;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: #e6ebf0;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $tab-indicator-color;
|
||||
$text-tab-indicator-active-color: $tab-indicator-active-color;
|
||||
$text-tab-bg-color: $tab-bg-color;
|
||||
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
153
app/javascript/styles/mastodon-material/color/plus-classic.scss
Normal file
153
app/javascript/styles/mastodon-material/color/plus-classic.scss
Normal file
@ -0,0 +1,153 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: light;
|
||||
|
||||
// Base color
|
||||
$primary-color: #4285f4;
|
||||
$secondary-color: #db4437;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #000000;
|
||||
$secondary-text-color: #5f6368;
|
||||
$ui-text-color: #202124;
|
||||
$inverted-text-color: #ffffff;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #5e5e5e;
|
||||
$tips-text-color: #c0c0c0;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #fafafa;
|
||||
$menu-bg-color: #ffffff;
|
||||
$menu-bg-hover-color: darken($menu-bg-color, 6%);
|
||||
$menu-bg-active-color: darken($menu-bg-color, 10%);
|
||||
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
|
||||
$card-bg-color: #ffffff;
|
||||
$card-bg-hover-color: darken($card-bg-color, 6%);
|
||||
$list-bg-color: #ffffff;
|
||||
$list-bg-hover-color: darken($list-bg-color, 6%);
|
||||
$list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: darken($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: darken($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #757575;
|
||||
$icon-hover-color: darken($icon-color, 30%);
|
||||
$icon-bg-hover-color: transparentize(#000000, 0.9);
|
||||
$icon-bg-active-color: transparentize(#000000, 0.8);
|
||||
$disabled-icon-color: lighten($icon-color, 16%);
|
||||
$top-bar-icon-color: #ffffff;
|
||||
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: $secondary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #dadce0;
|
||||
$border-hover-color: darken($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: darken($bg-color, 20%);
|
||||
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: #db4437;
|
||||
$search-bar-color: darken($bg-color, 6%);
|
||||
$search-bar-focus-color: $bg-color;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: $top-bar-color;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $top-bar-color;
|
||||
$text-tab-bg-color: #ffffff;
|
||||
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
153
app/javascript/styles/mastodon-material/color/v1-dark.scss
Normal file
153
app/javascript/styles/mastodon-material/color/v1-dark.scss
Normal file
@ -0,0 +1,153 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: dark;
|
||||
|
||||
// Base color
|
||||
$primary-color: #4285f4;
|
||||
$secondary-color: #db4437;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #ffffff;
|
||||
$secondary-text-color: #9aa0a6;
|
||||
$ui-text-color: #e8eaed;
|
||||
$inverted-text-color: #000000;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #9aa0a6;
|
||||
$tips-text-color: #c0c0c0;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #303030;
|
||||
$menu-bg-color: #424242;
|
||||
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
|
||||
$menu-bg-active-color: lighten($menu-bg-color, 10%);
|
||||
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
|
||||
$card-bg-color: #424242;
|
||||
$card-bg-hover-color: lighten($card-bg-color, 6%);
|
||||
$list-bg-color: #424242;
|
||||
$list-bg-hover-color: lighten($list-bg-color, 6%);
|
||||
$list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: lighten($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #1e1e1e;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #e2e2e3;
|
||||
$icon-hover-color: #ffffff;
|
||||
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
|
||||
$icon-bg-active-color: transparentize(#ffffff, 0.7);
|
||||
$disabled-icon-color: darken($icon-color, 16%);
|
||||
$top-bar-icon-color: #ffffff;
|
||||
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
|
||||
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #2e2e2e;
|
||||
$border-hover-color: lighten($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: lighten($bg-color, 20%);
|
||||
$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
|
||||
$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: #1565C0;
|
||||
$search-bar-color: lighten($bg-color, 6%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: $top-bar-color;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $top-bar-color;
|
||||
$text-tab-bg-color: #424242;
|
||||
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
154
app/javascript/styles/mastodon-material/color/v1-light.scss
Normal file
154
app/javascript/styles/mastodon-material/color/v1-light.scss
Normal file
@ -0,0 +1,154 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: light;
|
||||
|
||||
// Base color
|
||||
$primary-color: #4285f4;
|
||||
$secondary-color: #db4437;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #000000;
|
||||
$secondary-text-color: #5f6368;
|
||||
$ui-text-color: #202124;
|
||||
$inverted-text-color: #ffffff;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #5e5e5e;
|
||||
$tips-text-color: #c0c0c0;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #fafafa;
|
||||
$menu-bg-color: #ffffff;
|
||||
$menu-bg-hover-color: darken($menu-bg-color, 6%);
|
||||
$menu-bg-active-color: darken($menu-bg-color, 10%);
|
||||
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
|
||||
$card-bg-color: #ffffff;
|
||||
$card-bg-hover-color: darken($card-bg-color, 6%);
|
||||
$list-bg-color: #ffffff;
|
||||
$list-bg-hover-color: darken($list-bg-color, 6%);
|
||||
$list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: darken($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: darken($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #757575;
|
||||
$icon-hover-color: darken($icon-color, 30%);
|
||||
$icon-bg-hover-color: transparentize(#000000, 0.9);
|
||||
$icon-bg-active-color: transparentize(#000000, 0.8);
|
||||
$disabled-icon-color: lighten($icon-color, 16%);
|
||||
$top-bar-icon-color: #ffffff;
|
||||
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||
$top-bar-unread-icon-color: darken($primary-color, 30%);
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #dadce0;
|
||||
$border-hover-color: darken($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: darken($bg-color, 20%);
|
||||
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: #2196f3;
|
||||
$search-bar-color: darken($bg-color, 6%);
|
||||
$search-bar-focus-color: $bg-color;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: $top-bar-color;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $top-bar-color;
|
||||
$text-tab-bg-color: #ffffff;
|
||||
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
154
app/javascript/styles/mastodon-material/color/v2-dark.scss
Normal file
154
app/javascript/styles/mastodon-material/color/v2-dark.scss
Normal file
@ -0,0 +1,154 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: dark;
|
||||
|
||||
// Base color
|
||||
$primary-color: #4285f4;
|
||||
$secondary-color: #db4437;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #ffffff;
|
||||
$secondary-text-color: #9aa0a6;
|
||||
$ui-text-color: #e8eaed;
|
||||
$inverted-text-color: #000000;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #9aa0a6;
|
||||
$tips-text-color: #c0c0c0;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #121212;
|
||||
$menu-bg-color: #1e1e1e;
|
||||
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
|
||||
$menu-bg-active-color: lighten($menu-bg-color, 10%);
|
||||
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
|
||||
$card-bg-color: #1e1e1e;
|
||||
$card-bg-hover-color: lighten($card-bg-color, 6%);
|
||||
$list-bg-color: #1e1e1e;
|
||||
$list-bg-hover-color: lighten($list-bg-color, 6%);
|
||||
$list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: lighten($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #1e1e1e;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #e2e2e3;
|
||||
$icon-hover-color: #ffffff;
|
||||
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
|
||||
$icon-bg-active-color: transparentize(#ffffff, 0.7);
|
||||
$disabled-icon-color: darken($icon-color, 16%);
|
||||
$top-bar-icon-color: $icon-color;
|
||||
$top-bar-icon-hover-color: $icon-hover-color;
|
||||
$top-bar-icon-active-color: $primary-color;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: #272727;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: $primary-color;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #5f6368;
|
||||
$border-hover-color: lighten($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: lighten($bg-color, 20%);
|
||||
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
|
||||
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: #272727;
|
||||
$search-bar-color: lighten($top-bar-color, 18%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: $top-bar-color;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $ui-text-color;
|
||||
$text-tab-bg-color: #1e1e1e;
|
||||
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
154
app/javascript/styles/mastodon-material/color/v2-light.scss
Normal file
154
app/javascript/styles/mastodon-material/color/v2-light.scss
Normal file
@ -0,0 +1,154 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
$color-scheme: light;
|
||||
|
||||
// Base color
|
||||
$primary-color: #4285f4;
|
||||
$secondary-color: #db4437;
|
||||
$error-color: #B00020;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
// Text color
|
||||
$primary-text-color: #000000;
|
||||
$secondary-text-color: #5f6368;
|
||||
$ui-text-color: #202124;
|
||||
$inverted-text-color: #ffffff;
|
||||
$section-text-color: $primary-color;
|
||||
$info-text-color: #5e5e5e;
|
||||
$tips-text-color: #c0c0c0;
|
||||
$disabled-text-color: rgba(0,0,0,.54);
|
||||
$link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
$primary-text-on-shadow-color: #ffffff;
|
||||
$text-field-color: $ui-text-color;
|
||||
|
||||
// Background-color
|
||||
$bg-color: #ffffff;
|
||||
$menu-bg-color: $bg-color;
|
||||
$menu-bg-hover-color: darken($menu-bg-color, 6%);
|
||||
$menu-bg-active-color: darken($menu-bg-color, 10%);
|
||||
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
|
||||
$card-bg-color: $bg-color;
|
||||
$card-bg-hover-color: darken($card-bg-color, 6%);
|
||||
$list-bg-color: $bg-color;
|
||||
$list-bg-hover-color: darken($list-bg-color, 6%);
|
||||
$list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-active-hover-color: darken($list-bg-color, 16%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$dropdown-field-bg-color: darken($bg-color, 6%);
|
||||
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
|
||||
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
$chip-selected-text-color: $primary-color;
|
||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
||||
$outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #757575;
|
||||
$icon-hover-color: darken($icon-color, 30%);
|
||||
$icon-bg-hover-color: transparentize(#000000, 0.9);
|
||||
$icon-bg-active-color: transparentize(#000000, 0.8);
|
||||
$disabled-icon-color: lighten($icon-color, 16%);
|
||||
$top-bar-icon-color: $icon-color;
|
||||
$top-bar-icon-hover-color: $icon-hover-color;
|
||||
$top-bar-icon-active-color: $primary-color;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-bg-color: transparentize(#000000, 0.5);
|
||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
||||
|
||||
// Control color
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
// Button color
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: $primary-color;
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
$disabled-button-color: #cccccc;
|
||||
$floating-action-button-color: #ffffff;
|
||||
$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: darken($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: $primary-color;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #dadce0;
|
||||
$border-hover-color: darken($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
// Scroll bar color
|
||||
$scroll-bar-thumb-color: darken($bg-color, 20%);
|
||||
$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
|
||||
$scroll-bar-thumb-active-color: darken($bg-color, 38%);
|
||||
|
||||
// App bar color
|
||||
$top-bar-color: $bg-color;
|
||||
$search-bar-color: darken($bg-color, 6%);
|
||||
$search-bar-focus-color: $bg-color;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-bg-color: $top-bar-color;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $ui-text-color;
|
||||
$text-tab-bg-color: #ffffff;
|
||||
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Progress indicator color
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -0,0 +1,74 @@
|
||||
@charset "UTF-8";
|
||||
@import '../theme/mixins';
|
||||
|
||||
|
||||
// Navigation bar radius
|
||||
$nav-bar-radius: 2px;
|
||||
|
||||
|
||||
// Search bar radius
|
||||
$search-bar-radius: 2px;
|
||||
|
||||
|
||||
// Bar radius settings
|
||||
$bar-radius: 0;
|
||||
|
||||
|
||||
// Button radius settings
|
||||
$button-radius: 2px;
|
||||
|
||||
|
||||
// Card radius settings
|
||||
$card-radius: 2px;
|
||||
|
||||
|
||||
// Dialog radius settings
|
||||
$dialog-radius: 2px;
|
||||
|
||||
|
||||
// Menu radius settings
|
||||
$menu-radius: 2px;
|
||||
|
||||
|
||||
// Media radius settings
|
||||
$media-radius: 0;
|
||||
|
||||
|
||||
// Navigation drawer item settings
|
||||
$nav-drawer-item-radius: 0;
|
||||
|
||||
|
||||
// Avatar cropping settings
|
||||
$avatar-radius: 50%; // Rounded cropping
|
||||
//$avatar-radius: 2px // Material v1 square
|
||||
//$avatar-radius: $card-radius // Fit to card radius
|
||||
|
||||
|
||||
// Chip settings
|
||||
$chip-type: contained; // Material v1 styled contained chip
|
||||
|
||||
|
||||
// Button on statuses
|
||||
$button-on-status: text; // Material v1 styled text button
|
||||
//$button-on-status: outlined; // Material v2 styled outlined button
|
||||
|
||||
|
||||
// Button shadow
|
||||
$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
|
||||
|
||||
// Floating Action Button size
|
||||
$fab-size: 56px;
|
||||
|
||||
|
||||
// CW text field border
|
||||
$cw-area-border: underlined;
|
||||
//$cw-area-border: none;
|
||||
|
||||
// Compose text field border
|
||||
$compose-area-border: none;
|
||||
//$compose-area-border: underlined;
|
||||
|
||||
// Other text field border
|
||||
$other-text-area-border: underlined;
|
||||
//$other-text-area-border: none;
|
||||
@ -0,0 +1,87 @@
|
||||
@charset "UTF-8";
|
||||
@import '../theme/mixins';
|
||||
|
||||
|
||||
// Navigation bar radius
|
||||
$nav-bar-radius: 8px;
|
||||
//$nav-bar-radius: 28px; // full radius
|
||||
|
||||
|
||||
// Search bar radius
|
||||
$search-bar-radius: 8px;
|
||||
//$search-bar-radius: 21px; // full rounded
|
||||
|
||||
|
||||
// Bar radius settings
|
||||
$bar-radius: 0;
|
||||
//$bar-radius: 8px;
|
||||
|
||||
|
||||
// Button radius settings
|
||||
$button-radius: 8px;
|
||||
|
||||
|
||||
// Card radius settings
|
||||
$card-radius: 8px;
|
||||
|
||||
|
||||
// Dialog radius settings
|
||||
$dialog-radius: 8px;
|
||||
|
||||
|
||||
// Menu radius settings
|
||||
$menu-radius: 8px;
|
||||
|
||||
|
||||
// Media radius settings
|
||||
$media-radius: 0;
|
||||
//$media-radius: 2px;
|
||||
|
||||
|
||||
// Navigation drawer item settings
|
||||
$nav-drawer-item-radius: 8px; // corner rounded
|
||||
//$nav-drawer-item-radius: 32px; // full rounded
|
||||
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
|
||||
|
||||
|
||||
// Avatar cropping settings
|
||||
$avatar-radius: 50%; // Rounded cropping
|
||||
//$avatar-radius: $card-radius // Fit to card radius
|
||||
//$avatar-radius: 2px // Material v1 square
|
||||
//$avatar-radius: 8px // Material v2 square
|
||||
|
||||
|
||||
// Chip settings
|
||||
$chip-type: outlined; // Material v2 styled outlined chip
|
||||
//$outlined-chip: contained; // Material v1 styled contained chip
|
||||
|
||||
|
||||
// Button on statuses
|
||||
$button-on-status: text; // Material v1 styled text button
|
||||
//$button-on-status: outlined; // Material v2 styled outlined button
|
||||
|
||||
|
||||
// Button shadow
|
||||
$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
//$button-shadow: false; // Material v2 styled colored button without shadow
|
||||
|
||||
|
||||
// Floating Action Button size
|
||||
$fab-size: 56px; // Regular
|
||||
//$fab-size: 40px; // Mini
|
||||
|
||||
|
||||
// CW text field border
|
||||
$cw-area-border: none;
|
||||
//$cw-area-border: underlined;
|
||||
//$cw-area-border: outlined;
|
||||
|
||||
// Compose text field border
|
||||
$compose-area-border: none;
|
||||
//$compose-area-border: underlined;
|
||||
//$compose-area-border: outlined;
|
||||
|
||||
// Other text field border
|
||||
$other-text-area-border: underlined;
|
||||
//$other-text-area-border: outlined;
|
||||
//$other-text-area-border: none;
|
||||
21
app/javascript/styles/mastodon-material/plugins/astarte.scss
Normal file
21
app/javascript/styles/mastodon-material/plugins/astarte.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.announcements {
|
||||
li {
|
||||
padding: 8px 16px;
|
||||
background: $card-bg-color;
|
||||
color: $primary-text-color;
|
||||
border-radius: $card-radius;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin: 0;
|
||||
right: 16px;
|
||||
height: 20px;
|
||||
|
||||
.icon-button {
|
||||
@include icon-button;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
}
|
||||
}
|
||||
31
app/javascript/styles/mastodon-material/plugins/cards.scss
Normal file
31
app/javascript/styles/mastodon-material/plugins/cards.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.column {
|
||||
box-shadow: none !important;
|
||||
margin: 2px 0 !important;
|
||||
padding: 8px !important;
|
||||
|
||||
> .scrollable { background: $bg-color }
|
||||
}
|
||||
|
||||
.status {
|
||||
border-bottom: 0;
|
||||
border-radius: $card-radius;
|
||||
background: $card-bg-color;
|
||||
|
||||
&__prepend { padding: 8px 8px 2px 0 }
|
||||
}
|
||||
|
||||
.account { border-bottom: 0 !important }
|
||||
|
||||
.status__wrapper.status__wrapper,
|
||||
.notification.notification {
|
||||
@include shadow-1dp;
|
||||
margin: 8px 2px;
|
||||
border-radius: $card-radius;
|
||||
background: $card-bg-color;
|
||||
}
|
||||
|
||||
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
||||
|
||||
.notification__filter-bar {
|
||||
@include non-overflow-shadow-4dp;
|
||||
}
|
||||
85
app/javascript/styles/mastodon-material/plugins/dense.scss
Normal file
85
app/javascript/styles/mastodon-material/plugins/dense.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.drawer {
|
||||
&__header { height: 48px }
|
||||
|
||||
&__tab { margin: 6px auto 6px }
|
||||
}
|
||||
|
||||
.column { margin: 10px 5px }
|
||||
|
||||
.column-header {
|
||||
height: 48px;
|
||||
|
||||
> button { padding: 12px 16px }
|
||||
|
||||
&__buttons { height: 48px }
|
||||
|
||||
&__button { margin: 6px }
|
||||
|
||||
&__back-button { margin: 6px }
|
||||
}
|
||||
|
||||
.column-subheading { padding: 8px 16px }
|
||||
|
||||
.column-link { padding: 12px 16px }
|
||||
|
||||
.tabs-bar__link { padding: 12px 16px 8px 16px }
|
||||
|
||||
.notification__filter-bar button { padding: 12px 0 }
|
||||
|
||||
.getting-started__footer {
|
||||
padding: 12px 16px;
|
||||
|
||||
p { margin-bottom: 12px }
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
.compose-form {
|
||||
&__publish { padding-top: 8px }
|
||||
|
||||
&__buttons-wrapper {
|
||||
.icon-button,
|
||||
.text-icon-button { padding: 4px }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 8px 8px 4px 66px;
|
||||
|
||||
&__expand { width: 66px }
|
||||
|
||||
&__info { padding-right: 0 }
|
||||
|
||||
&__avatar {
|
||||
left: 8px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&__content { padding-top: 2px }
|
||||
|
||||
&__action-bar-button {
|
||||
margin: 0 4px;
|
||||
|
||||
&.icon-button { padding: 4px }
|
||||
}
|
||||
|
||||
&__action-bar-dropdown {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
margin: 0 4px;
|
||||
|
||||
.icon-button { padding: 4px }
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
padding: 14px;
|
||||
|
||||
&__meta { margin-top: 14px }
|
||||
|
||||
&__action-bar { padding: 10px 0 }
|
||||
}
|
||||
|
||||
.reply-indicator { padding: 8px }
|
||||
|
||||
.button.button--block { margin: 6px 0 }
|
||||
30
app/javascript/styles/mastodon-material/plugins/plus.scss
Normal file
30
app/javascript/styles/mastodon-material/plugins/plus.scss
Normal file
@ -0,0 +1,30 @@
|
||||
.status__action-bar-button {
|
||||
background: #eeeeee;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
|
||||
.fa { vertical-align: bottom }
|
||||
}
|
||||
|
||||
// exception
|
||||
.media-modal__overlay .picture-in-picture__footer .icon-button,
|
||||
.status__action-bar-button.icon-button--with-counter { background: transparent }
|
||||
|
||||
// favorite icon
|
||||
.star-icon.active,
|
||||
.star-icon.icon-button.active.activate,
|
||||
.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
left: -34px;
|
||||
|
||||
.star-icon {
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
vertical-align: baseline;
|
||||
font-size: 18px;
|
||||
|
||||
&.fa-fw::before { vertical-align: middle }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your settings below
|
||||
|
||||
@import '../../color/mastodon-dark.scss';
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
//@import '../../plugins/cards';
|
||||
//@import '../../plugins/dense';
|
||||
//@import '../../plugins/plus';
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your settings below
|
||||
|
||||
@import '../../color/mastodon-light.scss';
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
//@import '../../plugins/cards';
|
||||
//@import '../../plugins/dense';
|
||||
//@import '../../plugins/plus';
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your settings below
|
||||
|
||||
@import '../../color/black';
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
//@import '../../plugins/cards';
|
||||
//@import '../../plugins/dense';
|
||||
//@import '../../plugins/plus';
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your settings below
|
||||
|
||||
@import '../../color/v2-dark.scss';
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
//@import '../../plugins/cards';
|
||||
//@import '../../plugins/dense';
|
||||
//@import '../../plugins/plus';
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1 @@
|
||||
// Add your settings below
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
//@import '../../plugins/cards';
|
||||
//@import '../../plugins/dense';
|
||||
//@import '../../plugins/plus';
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your settings below
|
||||
|
||||
@import '../../color/plus-classic';
|
||||
@ -0,0 +1,9 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";
|
||||
|
||||
$favorite-icon-color: #ffffff;
|
||||
|
||||
$reply-icon: "comment";
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1 @@
|
||||
// Add your customization below
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
@import '../../plugins/cards';
|
||||
@import '../../plugins/dense';
|
||||
@import '../../plugins/plus';
|
||||
@ -0,0 +1,50 @@
|
||||
// Add your customization below
|
||||
|
||||
$primary-color: #7e5f66;
|
||||
|
||||
$section-text-color: lighten($primary-color, 10%);
|
||||
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
$icon-color: #d2d2d2;
|
||||
$icon-hover-color: #ffffff;
|
||||
$top-bar-icon-color: $icon-color;
|
||||
$top-bar-icon-hover-color: $icon-hover-color;
|
||||
$top-bar-icon-active-color: lighten($primary-color, 20%);
|
||||
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: lighten($primary-color, 20%);
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $primary-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $primary-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
$floating-action-button-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
$toggle-thumb-active-color: $primary-color;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$icon-tab-indicator-active-color: $primary-color;
|
||||
$icon-tab-indicator-hover-color: $icon-hover-color;
|
||||
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your settings below
|
||||
|
||||
@import '../../color/v2-dark';
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1,9 @@
|
||||
// Add your customization below
|
||||
|
||||
$avatar-radius: 2px;
|
||||
|
||||
$button-on-status: outlined;
|
||||
|
||||
$cw-area-border: outlined;
|
||||
|
||||
$compose-area-border: outlined;
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
//@import '../../plugins/cards';
|
||||
@import '../../plugins/dense';
|
||||
//@import '../../plugins/plus';
|
||||
@ -0,0 +1,55 @@
|
||||
// Add your customization below
|
||||
|
||||
$primary-color: #7e5f66;
|
||||
|
||||
$section-text-color: $primary-color;
|
||||
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
$icon-color: #92787d;
|
||||
$icon-hover-color: darken($icon-color, 10%);
|
||||
$top-bar-icon-color: $icon-color;
|
||||
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||
$floating-action-button-icon-color: $primary-color;
|
||||
|
||||
$control-border-color: $icon-color;
|
||||
$control-border-active-color: $primary-color;
|
||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
||||
|
||||
$icon-button-color: $icon-color;
|
||||
$icon-button-hover-color: $icon-hover-color;
|
||||
$icon-button-active-color: lighten($primary-color, 20%);
|
||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||||
$contained-button-color: $primary-color;
|
||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||
$outlined-button-color: $contained-button-color;
|
||||
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
|
||||
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
|
||||
$text-button-color: $contained-button-color;
|
||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||
|
||||
$bg-color: #fafafa;
|
||||
|
||||
$toggle-thumb-active-color: $primary-color;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
$border-color: lighten($icon-color, 30%);
|
||||
$border-hover-color: darken($border-color, 30%);
|
||||
$border-active-color: $primary-color;
|
||||
|
||||
$scroll-bar-thumb-color: lighten($icon-color, 30%);
|
||||
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$text-tab-indicator-color: lighten($top-bar-icon-color, 10%);
|
||||
$text-tab-indicator-active-color: $top-bar-icon-color;
|
||||
$icon-tab-indicator-active-color: $top-bar-icon-color;
|
||||
$icon-tab-indicator-hover-color: $top-bar-icon-hover-color;
|
||||
|
||||
$progress-indicator-color: $primary-color;
|
||||
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
|
||||
$loading-indicator-color: $primary-color;
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your settings below
|
||||
|
||||
@import '../../color/v2-light';
|
||||
@ -0,0 +1,3 @@
|
||||
// Add your icon customization below
|
||||
|
||||
$icon-font-source: self;
|
||||
@ -0,0 +1,9 @@
|
||||
// Add your customization below
|
||||
|
||||
$avatar-radius: 2px;
|
||||
|
||||
$button-on-status: outlined;
|
||||
|
||||
$cw-area-border: outlined;
|
||||
|
||||
$compose-area-border: outlined;
|
||||
@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||
@import 'config', 'icon_config';
|
||||
@import 'color', 'layout';
|
||||
|
||||
@import '../../theme/functions', '../../theme/mixins';
|
||||
@import '../../theme/theme';
|
||||
@import 'plugins';
|
||||
|
||||
@import '../../theme/material-icons';
|
||||
@ -0,0 +1,4 @@
|
||||
@import '../../plugins/astarte';
|
||||
//@import '../../plugins/cards';
|
||||
@import '../../plugins/dense';
|
||||
//@import '../../plugins/plus';
|
||||
@ -0,0 +1,7 @@
|
||||
@use "sass:string";
|
||||
|
||||
|
||||
// convert hex color code to svg styled ascii color code
|
||||
@function svg-color($color) {
|
||||
@return '%23' + string.slice(inspect($color), 2, 7);
|
||||
}
|
||||
266
app/javascript/styles/mastodon-material/theme/_mixins.scss
Normal file
266
app/javascript/styles/mastodon-material/theme/_mixins.scss
Normal file
@ -0,0 +1,266 @@
|
||||
$shadow-color-1: rgba(0,0,0,.2);
|
||||
$shadow-color-2: rgba(0,0,0,.14);
|
||||
$shadow-color-3: rgba(0,0,0,.12);
|
||||
|
||||
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
|
||||
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
|
||||
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
|
||||
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
|
||||
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
|
||||
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
|
||||
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
|
||||
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
|
||||
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
|
||||
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
|
||||
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
|
||||
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
|
||||
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
|
||||
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
|
||||
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
|
||||
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
|
||||
@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
|
||||
@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
|
||||
@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
|
||||
@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
|
||||
@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
|
||||
@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
|
||||
@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
|
||||
@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
|
||||
|
||||
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
|
||||
|
||||
@mixin material-transition { transition: .25s cubic-bezier(0,0,0.2,1) }
|
||||
|
||||
@mixin search-bar-hover {
|
||||
@if $search-bar-hover {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-type($chip-type) {
|
||||
@if $chip-type == contained {
|
||||
background: $contained-chip-color;
|
||||
|
||||
&.active { background-color: $contained-chip-selected-color }
|
||||
|
||||
&:hover { background-color: $contained-chip-selected-color }
|
||||
}
|
||||
|
||||
@if $chip-type == outlined {
|
||||
background: $outlined-chip-color;
|
||||
border: 1px solid $outlined-chip-selected-border-color;
|
||||
|
||||
&.active { background-color: $outlined-chip-selected-color }
|
||||
|
||||
&:hover { background: $outlined-chip-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-type($button-type) {
|
||||
border-radius: $button-radius;
|
||||
display: inline-block;
|
||||
|
||||
@if $button-type == contained {
|
||||
@if $button-shadow { @include shadow-1dp }
|
||||
background: $contained-button-color;
|
||||
color: $contained-button-text-color;
|
||||
|
||||
&:hover { background: $contained-button-hover-color }
|
||||
|
||||
&:focus { background: $contained-button-color }
|
||||
}
|
||||
|
||||
@if $button-type == outlined {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
color: $outlined-button-color;
|
||||
border: 1px solid $outlined-button-color;
|
||||
|
||||
&:hover { background: $outlined-button-hover-color }
|
||||
|
||||
&:focus { background: $outlined-button-hover-color }
|
||||
}
|
||||
|
||||
@if $button-type == text {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
&:hover { background: $text-button-hover-color }
|
||||
|
||||
&:focus { background: $text-button-focus-color }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-shadow {
|
||||
@if $button-shadow {
|
||||
button.btn,
|
||||
.button,
|
||||
.block-button,
|
||||
.input-copy button,
|
||||
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-area-border($text-area-border) {
|
||||
background: $text-field-bg-color;
|
||||
color: $text-field-color;
|
||||
|
||||
&:hover { border-color: $border-hover-color }
|
||||
|
||||
@if $text-area-border == underlined {
|
||||
border-radius: $card-radius $card-radius 0 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:active,
|
||||
&:focus { border-bottom: 2px solid $border-active-color }
|
||||
}
|
||||
|
||||
@if $text-area-border == outlined {
|
||||
border-radius: $card-radius;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 2px solid $border-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin icon-button {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
// check background-image value
|
||||
@mixin bg-image {
|
||||
@if $bg-image == none {
|
||||
} @else { background-image: url($bg-image) }
|
||||
}
|
||||
|
||||
|
||||
@mixin icon-font-style {
|
||||
@if $icon-font-style == filled { font-family: "Material Icons" }
|
||||
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
|
||||
@if $icon-font-style == round { font-family: "Material Icons Round" }
|
||||
@if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
|
||||
@if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
|
||||
}
|
||||
|
||||
@mixin icon-font {
|
||||
@if $icon-font-source == github {
|
||||
@if $icon-font-style == filled {
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
src: local("Material Icons"),
|
||||
url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == outlined {
|
||||
@font-face {
|
||||
font-family: "Material Icons Outlined";
|
||||
src: local("Material Icons Outlined"),
|
||||
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == round {
|
||||
@font-face {
|
||||
font-family: "Material Icons Round";
|
||||
src: local("Material Icons Round"),
|
||||
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == sharp {
|
||||
@font-face {
|
||||
font-family: "Material Icons Sharp";
|
||||
src: local("Material Icons Sharp"),
|
||||
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == two-tone {
|
||||
@font-face {
|
||||
font-family: "Material Icons Two Tone";
|
||||
src: local("Material Icons Two Tone"),
|
||||
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $icon-font-source == google {
|
||||
@if $icon-font-style == filled {
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
src: local("Material Icons"),
|
||||
url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == outlined {
|
||||
@font-face {
|
||||
font-family: "Material Icons Outlined";
|
||||
src: local("Material Icons Outlined"),
|
||||
url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == round {
|
||||
@font-face {
|
||||
font-family: "Material Icons Round";
|
||||
src: local("Material Icons Round"),
|
||||
url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == sharp {
|
||||
@font-face {
|
||||
font-family: "Material Icons Sharp";
|
||||
src: local("Material Icons Sharp"),
|
||||
url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == two-tone {
|
||||
@font-face {
|
||||
font-family: "Material Icons Two Tone";
|
||||
src: local("Material Icons Two Tone"),
|
||||
url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $icon-font-source == self {
|
||||
@if $icon-font-style == filled {
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
src: local("Material Icons"),
|
||||
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == outlined {
|
||||
@font-face {
|
||||
font-family: "Material Icons Outlined";
|
||||
src: local("Material Icons Outlined"),
|
||||
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == round {
|
||||
@font-face {
|
||||
font-family: "Material Icons Round";
|
||||
src: local("Material Icons"),
|
||||
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == sharp {
|
||||
@font-face {
|
||||
font-family: "Material Icons Sharp";
|
||||
src: local("Material Icons Sharp"),
|
||||
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
@if $icon-font-style == two-tone {
|
||||
@font-face {
|
||||
font-family: "Material Icons Two Tone";
|
||||
src: local("Material Icons Two Tone"),
|
||||
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
app/javascript/styles/mastodon-material/theme/about.scss
Normal file
50
app/javascript/styles/mastodon-material/theme/about.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.landing-page {
|
||||
&__call-to-action {
|
||||
@include shadow-2dp;
|
||||
background: $card-bg-color;
|
||||
border-radius: $card-radius;
|
||||
padding: 24px 36px;
|
||||
|
||||
.row__information-board {
|
||||
.information-board__section {
|
||||
padding: 0 16px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.landing {
|
||||
.simple_form p.lead {
|
||||
color: $ui-text-color;
|
||||
padding: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.directory { margin-top: 16px }
|
||||
|
||||
.hero-widget {
|
||||
.account { padding: 16px 0 }
|
||||
|
||||
h4 { color: $ui-text-color }
|
||||
|
||||
&__footer {
|
||||
background: $card-bg-color;
|
||||
padding: 16px;
|
||||
border-radius: 0 0 $card-radius $card-radius;
|
||||
}
|
||||
|
||||
&__counter {
|
||||
color: $primary-text-color;
|
||||
padding: 8px;
|
||||
|
||||
span { color: $ui-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__grid { grid-gap: 16px }
|
||||
|
||||
&__brand svg { fill: $ui-text-color }
|
||||
}
|
||||
|
||||
.information-board__section span:last-child { color: $ui-text-color }
|
||||
267
app/javascript/styles/mastodon-material/theme/account.scss
Normal file
267
app/javascript/styles/mastodon-material/theme/account.scss
Normal file
@ -0,0 +1,267 @@
|
||||
.account {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 16px;
|
||||
|
||||
.account__display-name,
|
||||
.account__display-name strong { color: $primary-text-color }
|
||||
|
||||
&__avatar {
|
||||
border-radius: $avatar-radius;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&-overlay {
|
||||
&-base {
|
||||
border-radius: $avatar-radius;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-size: 44px;
|
||||
}
|
||||
|
||||
&-overlay { border-radius: $avatar-radius }
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-wrapper {
|
||||
margin-left: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
&__bar {
|
||||
background: $card-bg-color;
|
||||
padding: 8px;
|
||||
border-bottom: none;
|
||||
|
||||
.avatar .account__avatar { border: none }
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
padding: 8px;
|
||||
|
||||
&__name {
|
||||
padding: 8px;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.icon-button {
|
||||
@include icon-button;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
margin-top: 0;
|
||||
|
||||
&__links {
|
||||
color: $secondary-text-color;
|
||||
padding: 8px 0;
|
||||
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
padding: 4px 12px;
|
||||
|
||||
strong { color: $ui-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bio {
|
||||
margin: 0;
|
||||
|
||||
.account__header {
|
||||
&__content {
|
||||
color: $primary-text-color;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&__fields {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
|
||||
.verified {
|
||||
border: none;
|
||||
background: $verified-bg-color;
|
||||
|
||||
a,
|
||||
&__mark { color: $primary-text-color }
|
||||
}
|
||||
|
||||
dl {
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:first-child .verified { border-radius: 0 }
|
||||
|
||||
&:last-child { border-bottom: 0 }
|
||||
}
|
||||
|
||||
dt {
|
||||
color: $primary-text-color;
|
||||
background: $list-bg-inactive-color;
|
||||
}
|
||||
|
||||
dd { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__account-note {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
label {
|
||||
color: $ui-text-color;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: $primary-text-color;
|
||||
padding: 8px 16px;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus { background: transparent }
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__content { color: $secondary-text-color }
|
||||
|
||||
&__fields {
|
||||
border-color: $border-color;
|
||||
|
||||
dl { border-bottom: 1px solid $border-color }
|
||||
|
||||
dt {
|
||||
color: $primary-text-color;
|
||||
background: $list-bg-inactive-color;
|
||||
}
|
||||
|
||||
dd { color: $primary-text-color }
|
||||
|
||||
.verified {
|
||||
border: none;
|
||||
background: $verified-bg-color;
|
||||
|
||||
&__mark { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
background: $text-tab-bg-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
a {
|
||||
padding: 16px 0;
|
||||
color: $text-tab-indicator-color;
|
||||
|
||||
&.active {
|
||||
color: $text-tab-indicator-active-color;
|
||||
border-bottom: 4px solid $text-tab-indicator-active-color;
|
||||
|
||||
&::before,
|
||||
&:after { border: none }
|
||||
|
||||
&:focus { background: $text-tab-indicator-bg-focus-color }
|
||||
}
|
||||
|
||||
&:hover { background: $text-tab-indicator-bg-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__relationship {
|
||||
padding: 8px;
|
||||
|
||||
.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-role,
|
||||
.simple_form .recommended {
|
||||
padding: 4px 8px;
|
||||
border-radius: 17px;
|
||||
color: $ui-text-color;
|
||||
background-color: $contained-chip-color;
|
||||
}
|
||||
|
||||
.account-gallery {
|
||||
&__item { border-radius: 0 }
|
||||
}
|
||||
|
||||
.card {
|
||||
&>a {
|
||||
@include shadow-1dp;
|
||||
|
||||
&:active .card__bar,
|
||||
&:focus .card__bar,
|
||||
&:hover .card__bar { background: $card-bg-color }
|
||||
}
|
||||
|
||||
&__img {
|
||||
background: $card-bg-color;
|
||||
border-radius: $card-radius $card-radius 0 0;
|
||||
|
||||
img { border-radius: $card-radius $card-radius 0 0 }
|
||||
}
|
||||
|
||||
&__bar {
|
||||
padding: 16px;
|
||||
background: $card-bg-color;
|
||||
border-radius: 0 0 $card-radius $card-radius;
|
||||
|
||||
.avatar {
|
||||
padding-top: 0;
|
||||
|
||||
img {
|
||||
border-radius: $avatar-radius;
|
||||
background: $card-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
margin-left: 16px;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
|
||||
span { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 28px;
|
||||
|
||||
.gap,
|
||||
.newer,
|
||||
.older,
|
||||
.page,
|
||||
a {
|
||||
color: $ui-text-color;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.current {
|
||||
background: $contained-chip-color;
|
||||
color: $ui-text-color;
|
||||
margin: 0 8px;
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
151
app/javascript/styles/mastodon-material/theme/admin.scss
Normal file
151
app/javascript/styles/mastodon-material/theme/admin.scss
Normal file
@ -0,0 +1,151 @@
|
||||
.admin-wrapper {
|
||||
.sidebar-wrapper__inner { background: $bg-color }
|
||||
|
||||
.sidebar {
|
||||
&__toggle {
|
||||
background: $top-bar-color;
|
||||
|
||||
&__icon { color: $top-bar-icon-color }
|
||||
|
||||
&__logo svg { fill: $top-bar-text-color }
|
||||
|
||||
a {
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover { background: $icon-bg-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
a {
|
||||
padding: 16px;
|
||||
color: $ui-text-color;
|
||||
border-radius: 0;
|
||||
|
||||
i.fa {
|
||||
margin-right: 32px;
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $list-bg-active-color;
|
||||
|
||||
&:hover { background: $list-bg-active-hover-color }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $ui-text-color;
|
||||
background-color: $list-bg-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: $bg-color;
|
||||
|
||||
a { padding: 16px 36px }
|
||||
}
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $ui-text-color;
|
||||
background-color: $list-bg-active-color;
|
||||
|
||||
&:hover { background-color: $list-bg-active-hover-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 60px 16px 16px;
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h6 { color: $ui-text-color }
|
||||
|
||||
h3 { margin-bottom: 28px }
|
||||
|
||||
h4 {
|
||||
color: $section-text-color;
|
||||
border-top: 1px solid $border-color;
|
||||
border-bottom: none;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.muted-hint {
|
||||
color: $ui-text-color;
|
||||
|
||||
a { color: $link-text-color }
|
||||
}
|
||||
|
||||
.positive-hint { color: $verified-color }
|
||||
|
||||
.directory__tag h4 { color: $ui-text-color }
|
||||
|
||||
&>p {
|
||||
color: $ui-text-color;
|
||||
margin-bottom: 16px;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.content-heading {
|
||||
border-bottom: none;
|
||||
margin: -16px -16px 40px 0;
|
||||
|
||||
&>* {
|
||||
margin-top: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters .filter-subset {
|
||||
padding: 0 16px;
|
||||
margin: 0 0 16px;
|
||||
border-right: 1px solid $border-color;
|
||||
|
||||
strong { color: $ui-text-color }
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
|
||||
li { margin-right: 0 }
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-tab-indicator-color;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 8px;
|
||||
|
||||
&.selected {
|
||||
color: $text-tab-indicator-active-color;
|
||||
border-bottom: 2px solid $text-tab-indicator-active-color;
|
||||
|
||||
&:hover {
|
||||
color: $text-tab-indicator-active-color;
|
||||
border-bottom: 2px solid $text-tab-indicator-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-tab-indicator-color;
|
||||
background: $text-tab-indicator-bg-hover-color;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
.positive-hint { color: $verified-color }
|
||||
|
||||
.muted-hint {
|
||||
color: $ui-text-color;
|
||||
|
||||
a { color: $link-text-color }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
|
||||
|
||||
|
||||
// Color scheme
|
||||
@import '../color/v1-light';
|
||||
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
||||
// @import '../../color/v2-light';
|
||||
|
||||
|
||||
// Layout profile
|
||||
@import '../layout/material-v1';
|
||||
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
||||
// @import '../../layout/material-v2';
|
||||
|
||||
|
||||
// Search bar hover settings
|
||||
// You can enable/disable search bar floating.
|
||||
$search-bar-hover: false;
|
||||
|
||||
|
||||
// Status font size in timeline
|
||||
$status-font-size: 15px; // mastodon default
|
||||
//$status-font-size: 16px; // compatible with material design
|
||||
|
||||
|
||||
// Name font size in timeline status
|
||||
$name-font-size: 15px; // mastodon default
|
||||
//$name-font-size: 16px; // compatible with material design
|
||||
|
||||
|
||||
// Background image
|
||||
// If you want to use the local image, please put it in "../"
|
||||
$bg-image: none;
|
||||
//$bg-image: "./image.png";
|
||||
//$bg-image: "https://example.com/img/image.png";
|
||||
|
||||
|
||||
// Columns transparency settings
|
||||
$bar-transparency: 1.0; // opacity
|
||||
//$bar-transparency: 0.8; // semi-transparent
|
||||
|
||||
$column-transparency: 1.0; // opacity
|
||||
//$column-transparency: 0.8; // semi-transparent
|
||||
@ -0,0 +1,28 @@
|
||||
// Favorite icon settings
|
||||
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
|
||||
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
|
||||
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
|
||||
|
||||
$favorite-icon-color: #ffd600; // Star
|
||||
//$favorite-icon-color: #ff4081; // Heart
|
||||
//$favorite-icon-color: #db4437; // +1
|
||||
//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
|
||||
|
||||
|
||||
// Reply icon settings
|
||||
$reply-icon: "reply";
|
||||
//$reply-icon: "comment"; // blooming
|
||||
|
||||
|
||||
// Material Design Icon settings
|
||||
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
||||
$icon-font-source: google; // Google Fonts
|
||||
//$icon-font-source: github; // GitHub
|
||||
//$icon-font-source: self; // Self-hosting
|
||||
|
||||
// Material Icon style settings
|
||||
$icon-font-style: filled;
|
||||
//$icon-font-style: outlined;
|
||||
//$icon-font-style: round;
|
||||
//$icon-font-style: sharp;
|
||||
//$icon-font-style: two-tone;
|
||||
23
app/javascript/styles/mastodon-material/theme/basics.scss
Normal file
23
app/javascript/styles/mastodon-material/theme/basics.scss
Normal file
@ -0,0 +1,23 @@
|
||||
body,
|
||||
body.embed,
|
||||
body.admin,
|
||||
body.lighter { background: $bg-color }
|
||||
|
||||
.focusable:focus { background: transparent }
|
||||
|
||||
// Chrome & Safari scroll bar
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $scroll-bar-thumb-color;
|
||||
|
||||
&:hover { background: $scroll-bar-thumb-hover-color }
|
||||
&:active { background: $scroll-bar-thumb-active-color }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-track:hover,
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
// Firefox scroll bar
|
||||
html { scrollbar-color: $scroll-bar-thumb-color transparent }
|
||||
162
app/javascript/styles/mastodon-material/theme/button.scss
Normal file
162
app/javascript/styles/mastodon-material/theme/button.scss
Normal file
@ -0,0 +1,162 @@
|
||||
@include button-shadow;
|
||||
|
||||
.icon-button {
|
||||
@include material-transition;
|
||||
color: $icon-button-color;
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
color: $icon-button-active-color;
|
||||
|
||||
&:hover { color: $icon-button-active-hover-color }
|
||||
}
|
||||
|
||||
&.disabled { color: $disabled-icon-color }
|
||||
|
||||
&.inverted {
|
||||
color: $icon-button-color;
|
||||
|
||||
&.active,
|
||||
&:active { color: $icon-button-active-color }
|
||||
|
||||
&:focus {
|
||||
color: $icon-button-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $icon-button-hover-color;
|
||||
background-color: $icon-bg-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlayed {
|
||||
@include icon-button;
|
||||
border-radius: 50%;
|
||||
background: $media-icon-bg-color;
|
||||
color: $media-icon-color;
|
||||
padding: 4px;
|
||||
line-height: 20px !important;
|
||||
|
||||
&:hover {
|
||||
background: $media-icon-bg-color;
|
||||
color: $media-icon-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
width: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus { color: $icon-button-active-color }
|
||||
|
||||
&:focus { background-color: transparent }
|
||||
|
||||
&:hover {
|
||||
@include material-transition;
|
||||
color: $icon-button-hover-color;
|
||||
background-color: $icon-bg-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox with label
|
||||
label.icon-button {
|
||||
&.active {
|
||||
color: $ui-text-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include material-transition;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.text-icon-button {
|
||||
color: $icon-button-color;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
|
||||
&.active {
|
||||
background-color: $icon-bg-hover-color;
|
||||
color: $icon-button-active-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $icon-bg-hover-color;
|
||||
color: $icon-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: $contained-button-color;
|
||||
border-radius: $button-radius;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $contained-button-color;
|
||||
border-radius: $button-radius;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include shadow-2dp;
|
||||
background-color: $contained-button-hover-color;
|
||||
}
|
||||
|
||||
&.logo-button {
|
||||
background: $contained-button-color;
|
||||
margin: 2px;
|
||||
|
||||
&:hover { background: $contained-button-hover-color }
|
||||
|
||||
.button--destructive:hover { background: $contained-button-hover-color }
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled { background-color: $disabled-button-color }
|
||||
|
||||
&.button--block { margin: 8px 0 }
|
||||
|
||||
&.button-secondary { @include button-type($button-on-status) }
|
||||
|
||||
&.confirmation-modal__cancel-button {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
margin: 0 8px;
|
||||
color: $text-button-color;
|
||||
|
||||
&:hover { background: $text-button-hover-color }
|
||||
|
||||
&:focus { background: $text-button-focus-color }
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler-button__overlay__label {
|
||||
background: $media-icon-bg-color;
|
||||
border-radius: $button-radius;
|
||||
color: $media-icon-color;
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.block-button, .block-button:last-child,
|
||||
.button, .button:last-child,
|
||||
button, button:last-child {
|
||||
display: inline-block;
|
||||
border-radius: $button-radius;
|
||||
background: $contained-button-color;
|
||||
color: $contained-button-text-color;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
padding: 10px 16px;
|
||||
margin-left: auto;
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
|
||||
&:hover { background: $contained-button-hover-color }
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover { background-color: $disabled-button-color }
|
||||
}
|
||||
}
|
||||
516
app/javascript/styles/mastodon-material/theme/columns.scss
Normal file
516
app/javascript/styles/mastodon-material/theme/columns.scss
Normal file
@ -0,0 +1,516 @@
|
||||
.column {
|
||||
@include shadow-1dp;
|
||||
padding: 0;
|
||||
margin: 10px 8px;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&>.scrollable {
|
||||
background: $list-bg-color;
|
||||
opacity: $column-transparency;
|
||||
}
|
||||
|
||||
&:last-child { box-shadow: none }
|
||||
}
|
||||
|
||||
.column-header {
|
||||
background: $top-bar-color;
|
||||
border-radius: $bar-radius;
|
||||
height: 56px;
|
||||
|
||||
> button {
|
||||
padding: 16px;
|
||||
color: $top-bar-text-color;
|
||||
}
|
||||
|
||||
&>.column-header__back-button { color: $top-bar-icon-color }
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $top-bar-unread-icon-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: 16px;
|
||||
color: $top-bar-icon-color;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&__buttons { height: 56px }
|
||||
|
||||
&__button {
|
||||
@include icon-button;
|
||||
background: $top-bar-color;
|
||||
color: $top-bar-icon-color;
|
||||
padding: 8px;
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
|
||||
&.active {
|
||||
color: $top-bar-icon-active-color;
|
||||
background: $icon-bg-active-color;
|
||||
|
||||
&:hover {
|
||||
color: $top-bar-icon-hover-color;
|
||||
background: $icon-bg-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $top-bar-icon-hover-color;
|
||||
background: $icon-bg-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__setting-btn {
|
||||
color: $icon-button-color;
|
||||
padding: 8px 0;
|
||||
|
||||
&:hover {
|
||||
color: $icon-button-hover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fa { font-size: 20px }
|
||||
|
||||
span { vertical-align: middle }
|
||||
}
|
||||
|
||||
&__setting-arrows {
|
||||
font-size: 16px;
|
||||
border-bottom: 8px;
|
||||
|
||||
.column-header__setting-btn {
|
||||
padding: 8px;
|
||||
margin: 0 8px;
|
||||
border-radius: 50%;
|
||||
|
||||
&:last-child { padding-right: 8px }
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@include shadow-4dp;
|
||||
border-radius: $bar-radius;
|
||||
opacity: $bar-transparency;
|
||||
|
||||
.announcements { border-top: 1px solid $border-color }
|
||||
|
||||
&.active {
|
||||
@include shadow-4dp;
|
||||
|
||||
&::before { background: transparent }
|
||||
}
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
transition: .25s cubic-bezier(0.0,0.0,0.2,1), .25s cubic-bezier(1,0.2,0,0);
|
||||
color: $ui-text-color;
|
||||
background: $card-bg-color;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
&-inner {
|
||||
background: $card-bg-color;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
opacity: 1;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__back-button {
|
||||
background: $top-bar-color;
|
||||
color: $top-bar-icon-color;
|
||||
margin: 10px;
|
||||
padding: 8px;
|
||||
font-size: 20px;
|
||||
|
||||
span { display: none }
|
||||
}
|
||||
}
|
||||
|
||||
.column-subheading {
|
||||
color: $section-text-color;
|
||||
background: $bg-color;
|
||||
padding: 12px 16px;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
&:first-child { border-top: none }
|
||||
}
|
||||
|
||||
.column-link {
|
||||
color: $ui-text-color;
|
||||
background: $bg-color;
|
||||
padding: 16px;
|
||||
border-radius: $nav-drawer-item-radius;
|
||||
|
||||
&:hover { background: $list-bg-hover-color }
|
||||
|
||||
&:active,
|
||||
&:focus { background: $list-bg-active-color }
|
||||
|
||||
&__icon {
|
||||
margin-right: 32px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
&.active {
|
||||
color: $ui-text-color;
|
||||
background: $menu-bg-active-color;
|
||||
|
||||
&:hover { background: $menu-bg-active-hover-color }
|
||||
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $ui-text-color;
|
||||
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
|
||||
.column-settings {
|
||||
&__section {
|
||||
color: $section-text-color;
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
&__row .text-btn { margin-bottom: 0 }
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
@include shadow-4dp;
|
||||
background: $top-bar-color;
|
||||
color: $top-bar-icon-color;
|
||||
padding: 16px;
|
||||
|
||||
span { visibility: hidden } // hide "back" string
|
||||
|
||||
&--slim-button { top: -54px }
|
||||
}
|
||||
|
||||
.column-inline-form {
|
||||
padding: 16px 0 16px 16px;
|
||||
background: $card-bg-color;
|
||||
|
||||
.icon-button {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
padding: 8px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
@include bg-image;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
background: $text-field-bg-color;
|
||||
border-radius: $bar-radius;
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
color: $secondary-text-color;
|
||||
background: $card-bg-color;
|
||||
font-size: 16px;
|
||||
contain: initial; // padding fix
|
||||
}
|
||||
|
||||
.conversation {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 12px;
|
||||
background: $list-bg-inactive-color;
|
||||
|
||||
&--unread {
|
||||
background: $list-bg-color;
|
||||
|
||||
.conversation__content__relative-time { color: $info-text-color }
|
||||
}
|
||||
|
||||
&__unread { background: $primary-color }
|
||||
|
||||
&__avatar { padding: 0 16px 0 0 }
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
|
||||
&__relative-time {
|
||||
font-size: 14px;
|
||||
color: $info-text-color;
|
||||
}
|
||||
|
||||
&__names,
|
||||
&__names a {
|
||||
color: $primary-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// read status in notification column
|
||||
.muted {
|
||||
.status {
|
||||
&__content {
|
||||
color: $read-primary-text-color !important;
|
||||
|
||||
p { color: $read-primary-text-color !important }
|
||||
|
||||
a { color: $read-secondary-text-color !important }
|
||||
}
|
||||
|
||||
&__display-name strong { color: $read-primary-text-color }
|
||||
}
|
||||
|
||||
.poll {
|
||||
color: $read-primary-text-color;
|
||||
|
||||
&__chart {
|
||||
background: $read-poll-bar-color;
|
||||
|
||||
&.leading { background: $read-poll-bar-leading-color }
|
||||
}
|
||||
|
||||
&__footer,
|
||||
&__link { color: $read-ui-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.load-gap { border-bottom: 1px solid $border-color }
|
||||
|
||||
.load-more {
|
||||
color: $icon-color;
|
||||
padding: 16px;
|
||||
|
||||
&:hover { background: $menu-bg-hover-color }
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
background: $bg-color;
|
||||
color: $ui-text-color;
|
||||
opacity: $column-transparency;
|
||||
|
||||
&__wrapper {
|
||||
background: $bg-color;
|
||||
height: auto !important;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 16px;
|
||||
|
||||
p {
|
||||
color: $secondary-text-color;
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
a { color: $ui-text-color }
|
||||
|
||||
p a { color: $link-text-color }
|
||||
}
|
||||
|
||||
&__trends {
|
||||
background: $bg-color;
|
||||
margin-bottom: 0;
|
||||
opacity: $column-transparency;
|
||||
|
||||
h4 {
|
||||
color: $section-text-color;
|
||||
padding: 12px 16px;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid $border-color;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends {
|
||||
&__header {
|
||||
color: $section-text-color;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 16px;
|
||||
|
||||
.fa { margin-right: 8px }
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 16px;
|
||||
border-bottom: none;
|
||||
|
||||
&__name {
|
||||
color: $secondary-text-color;
|
||||
font-size: 12px;
|
||||
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&__current {
|
||||
padding-right: 16px;
|
||||
margin-left: 4px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
&__sparkline path {
|
||||
stroke: $primary-color;
|
||||
fill: $primary-color;
|
||||
fill-opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
&__label {
|
||||
color: $ui-text-color;
|
||||
margin: 8px 8px 8px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.announcements {
|
||||
background: $card-bg-color;
|
||||
padding: 0 8px;
|
||||
|
||||
&__container { color: $primary-text-color }
|
||||
|
||||
&__item {
|
||||
padding: 16px 8px;
|
||||
font-size: 16px;
|
||||
|
||||
&__unread { background: $badge-color }
|
||||
|
||||
&__range {
|
||||
margin-bottom: 8px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
color: $ui-text-color;
|
||||
padding: 0 8px 16px;
|
||||
bottom: 0;
|
||||
position: initial;
|
||||
float: right;
|
||||
|
||||
.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
margin: 0 8px;
|
||||
line-height: normal !important;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
span { vertical-align: super }
|
||||
}
|
||||
}
|
||||
|
||||
.reactions-bar {
|
||||
margin-top: 16px;
|
||||
width: auto;
|
||||
|
||||
.emoji-button {
|
||||
color: $icon-button-color;
|
||||
font-size: 20px;
|
||||
|
||||
&:hover { color: $icon-button-hover-color }
|
||||
|
||||
&:active { color: $icon-button-active-color }
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include chip-type($chip-type);
|
||||
border-radius: 17px;
|
||||
margin: 2px 4px;
|
||||
|
||||
&.active .reactions-bar__item__count { color: $chip-selected-text-color }
|
||||
|
||||
&__emoji {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 4px 0 4px 2px;
|
||||
}
|
||||
|
||||
&__count {
|
||||
font-size: 16px;
|
||||
margin: 0 12px 0 8px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
&:hover { background: $contained-chip-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
&__filter-bar {
|
||||
background: $tab-bg-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
z-index: 1;
|
||||
opacity: $bar-transparency;
|
||||
|
||||
button {
|
||||
background: $tab-bg-color;
|
||||
color: $tab-indicator-color;
|
||||
font-size: 16px;
|
||||
|
||||
span { font-size: 14px }
|
||||
|
||||
&.active {
|
||||
color: $tab-indicator-active-color;
|
||||
border-bottom: 4px solid $tab-indicator-active-color;
|
||||
padding: 12px 0 8px;
|
||||
|
||||
&::before,
|
||||
&:after { border: none }
|
||||
|
||||
&:focus { background: $tab-indicator-bg-focus-color }
|
||||
}
|
||||
|
||||
&:hover { background: $tab-indicator-bg-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: $secondary-text-color;
|
||||
margin: 0 16px 0 70px;
|
||||
font-size: 16px;
|
||||
|
||||
.fa { color: $icon-button-color }
|
||||
}
|
||||
|
||||
&__display-name:hover { color: inherit }
|
||||
}
|
||||
|
||||
.notification-favourite .status.status-direct {
|
||||
.icon-button.disabled { color: $disabled-icon-color }
|
||||
}
|
||||
|
||||
.relationship-tag {
|
||||
color: $ui-text-color;
|
||||
background-color: $relationship-tag-color;
|
||||
font-size: 12px;
|
||||
border-radius: 17px;
|
||||
padding: 4px 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
// unread notification
|
||||
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
|
||||
|
||||
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
|
||||
702
app/javascript/styles/mastodon-material/theme/components.scss
Normal file
702
app/javascript/styles/mastodon-material/theme/components.scss
Normal file
@ -0,0 +1,702 @@
|
||||
.modal-root {
|
||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||
|
||||
&__overlay { background-color: rgba(0,0,0,.7) !important }
|
||||
}
|
||||
|
||||
.modal-layout { background-color: $bg-color }
|
||||
|
||||
.drawer {
|
||||
&__header {
|
||||
@include shadow-4dp;
|
||||
background: $top-bar-color;
|
||||
border-radius: $nav-bar-radius;
|
||||
justify-content: space-around;
|
||||
opacity: $bar-transparency;
|
||||
|
||||
a { transition: none }
|
||||
|
||||
a:hover {
|
||||
background: $icon-bg-hover-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__tab {
|
||||
color: $top-bar-icon-color;
|
||||
font-size: 20px;
|
||||
margin: 10px auto 10px;
|
||||
padding: 8px;
|
||||
flex: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-bottom: none;
|
||||
text-align: justify;
|
||||
|
||||
&:hover { color: $top-bar-icon-hover-color }
|
||||
}
|
||||
|
||||
&__pager {
|
||||
@include shadow-1dp;
|
||||
border-radius: $card-radius;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
background: $card-bg-color;
|
||||
opacity: $column-transparency;
|
||||
|
||||
&.darker {
|
||||
background: $card-bg-color;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
&__mastodon { background: $card-bg-color }
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus { opacity: 1.0 }
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
&__input {
|
||||
background: $search-bar-color;
|
||||
color: $tips-text-color;
|
||||
border-radius: $search-bar-radius;
|
||||
padding: 12px 12px 12px 40px;
|
||||
opacity: $bar-transparency;
|
||||
|
||||
&:focus {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
color: $search-bar-text-color;
|
||||
}
|
||||
|
||||
&:hover { @include search-bar-hover }
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
|
||||
&__icon {
|
||||
.fa {
|
||||
color: $icon-color;
|
||||
font-size: 20px;
|
||||
top: 12px;
|
||||
right: unset;
|
||||
left: 12px;
|
||||
height: 6px;
|
||||
transition: none;
|
||||
|
||||
&.active { opacity: 1 }
|
||||
|
||||
&-search {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
&-times-circle.active {
|
||||
right: 16px;
|
||||
left: unset;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-popout {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
border-radius: 0px $bar-radius;
|
||||
border-top: 1px solid $border-color;
|
||||
margin-top: 0;
|
||||
color: $tips-text-color;
|
||||
|
||||
h4 { color: $secondary-text-color }
|
||||
|
||||
em { color: $search-bar-text-color }
|
||||
}
|
||||
|
||||
.search-results {
|
||||
&__header {
|
||||
color: $secondary-text-color;
|
||||
background-color: $card-bg-color;
|
||||
padding: 16px;
|
||||
|
||||
.fa { margin-right: 16px }
|
||||
}
|
||||
|
||||
&__section {
|
||||
h5 {
|
||||
background: $card-bg-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 16px;
|
||||
color: $section-text-color;
|
||||
|
||||
.fa { margin-right: 8px }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
color: $secondary-text-color;
|
||||
padding: 14px;
|
||||
|
||||
strong {
|
||||
color: $ui-text-color;
|
||||
}
|
||||
|
||||
.navigation-bar__actions .compose__action-bar .icon-button {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
padding: 8px;
|
||||
|
||||
&.active {
|
||||
color: $icon-hover-color;
|
||||
background: $icon-bg-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-panel hr {
|
||||
border-top: 1px solid $border-color;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.flex-spacer { margin: 8px 0 }
|
||||
|
||||
.dropdown-menu {
|
||||
@include shadow-8dp;
|
||||
background: $menu-bg-color;
|
||||
padding: 8px 0;
|
||||
border-radius: $menu-radius;
|
||||
|
||||
&__arrow { visibility: hidden }
|
||||
|
||||
&__item a {
|
||||
font-size: 14px;
|
||||
padding: 8px 16px;
|
||||
background: $menu-bg-color;
|
||||
color: $menu-text-color;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $menu-bg-hover-color;
|
||||
color: $menu-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__separator {
|
||||
margin: 8px 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
.autosuggest-textarea {
|
||||
&__textarea {
|
||||
@include text-area-border($compose-area-border);
|
||||
padding: 8px 42px 8px 16px;
|
||||
|
||||
@if $compose-area-border == outlined {
|
||||
&:focus { padding: 7px 41px 7px 15px }
|
||||
}
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
|
||||
&__suggestions {
|
||||
@include shadow-1dp;
|
||||
background: $menu-bg-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
font-size: 16px;
|
||||
padding: 8px 0;
|
||||
|
||||
&__item {
|
||||
padding: 8px;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover { background: $menu-bg-hover-color }
|
||||
|
||||
&.selected,
|
||||
&:focus,
|
||||
&:active { background: $menu-bg-active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler-input {
|
||||
&.spoiler-input--visible { margin-bottom: 16px }
|
||||
|
||||
&__input {
|
||||
@include text-area-border($cw-area-border);
|
||||
padding: 8px 16px;
|
||||
|
||||
@if $cw-area-border == outlined {
|
||||
&:focus { padding: 7px 15px }
|
||||
}
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
&__warning {
|
||||
color: $secondary-text-color;
|
||||
background: $card-bg-color;
|
||||
padding: 16px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $card-radius;
|
||||
box-shadow: none;
|
||||
|
||||
a { color: $link-text-color }
|
||||
}
|
||||
|
||||
&__modifiers {
|
||||
background: $card-bg-color;
|
||||
color: $tips-text-color;
|
||||
|
||||
.compose-form {
|
||||
&__upload-thumbnail { border-radius: 0 }
|
||||
|
||||
&__upload__actions {
|
||||
@include material-transition;
|
||||
|
||||
.icon-button {
|
||||
color: $media-icon-color;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover { background-color: transparent }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons-wrapper {
|
||||
background: $card-bg-color;
|
||||
color: $tips-text-color;
|
||||
padding: 8px;
|
||||
|
||||
.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.text-icon-button {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
padding: 8px;
|
||||
margin: 0 2px;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__poll-wrapper {
|
||||
@if $compose-area-border == none {
|
||||
border-top: 1px solid $border-color;
|
||||
} @else { border-top: none }
|
||||
|
||||
ul { padding: 16px 12px 16px 0 }
|
||||
|
||||
select {
|
||||
color: $ui-text-color;
|
||||
background-color: $dropdown-field-bg-color;
|
||||
border: 0;
|
||||
|
||||
option { background: $list-bg-color }
|
||||
|
||||
&:focus { border-color: $border-hover-color }
|
||||
}
|
||||
|
||||
.button.button-secondary { @include button-type($button-on-status) }
|
||||
|
||||
.poll__footer { border-top: none }
|
||||
}
|
||||
|
||||
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
||||
}
|
||||
}
|
||||
|
||||
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
|
||||
|
||||
|
||||
.poll {
|
||||
margin-top: 8px;
|
||||
|
||||
.button { margin-right: 8px }
|
||||
|
||||
li { margin-bottom: 8px }
|
||||
|
||||
&__input {
|
||||
border: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
padding: 18px;
|
||||
margin: 0 2px;
|
||||
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
|
||||
|
||||
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
|
||||
|
||||
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
|
||||
|
||||
&.active:hover { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, $control-border-hover-color 5px, $control-border-hover-color 7px, $control-border-active-color 8px, $control-border-active-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
|
||||
|
||||
&.checkbox {
|
||||
border-radius: 2px;
|
||||
border: 2px solid $control-border-color;
|
||||
padding: 8px;
|
||||
margin: 8px 10px;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__text input[type=text] {
|
||||
color: $ui-text-color;
|
||||
background: $text-field-bg-color;
|
||||
border: 1px solid $border-color;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:focus { border-color: $border-hover-color }
|
||||
}
|
||||
|
||||
&__option {
|
||||
input[type=text] {
|
||||
color: $primary-text-color;
|
||||
background: $text-field-bg-color;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__chart {
|
||||
border-radius: 0;
|
||||
background: $progress-indicator-track-color;
|
||||
|
||||
&.leading { background: $progress-indicator-color }
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 0;
|
||||
color: $ui-text-color;
|
||||
}
|
||||
|
||||
&__link { color: $ui-text-color }
|
||||
}
|
||||
|
||||
.privacy-dropdown {
|
||||
&.active .privacy-dropdown__value.active {
|
||||
background: $icon-bg-hover-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
|
||||
.icon-button { color: $icon-button-active-color }
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
@include shadow-8dp;
|
||||
background: $menu-bg-color;
|
||||
border-radius: $dialog-radius;
|
||||
}
|
||||
|
||||
&__option {
|
||||
color: $icon-color;
|
||||
padding: 8px 16px;
|
||||
|
||||
&__icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $ui-text-color }
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $menu-bg-active-color;
|
||||
color: $icon-hover-color;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $ui-text-color }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $menu-bg-active-color;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $ui-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $menu-bg-hover-color;
|
||||
color: $icon-hover-color;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $ui-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.character-counter { color: $secondary-text-color }
|
||||
|
||||
.reply-indicator {
|
||||
box-shadow: none;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $card-radius;
|
||||
background: $card-bg-color;
|
||||
padding: 16px;
|
||||
|
||||
&__header { margin-bottom: 4px }
|
||||
|
||||
&__display {
|
||||
&-name {
|
||||
color: $primary-text-color;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
&-avatar { margin-right: 8px }
|
||||
}
|
||||
|
||||
&__content {
|
||||
color: $primary-text-color;
|
||||
|
||||
p { margin-bottom: 16px }
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
&__list a { color: $secondary-text-color }
|
||||
|
||||
&.compact .fa { color: $icon-color }
|
||||
}
|
||||
|
||||
.block-modal {
|
||||
@include shadow-24dp;
|
||||
background: $card-bg-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-bg-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
color: $ui-text-color;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
|
||||
.autosuggest-hashtag {
|
||||
&__name { color: $menu-text-color }
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
background: $bg-color;
|
||||
color: $ui-text-color;
|
||||
|
||||
&__column { padding: 8px 16px }
|
||||
}
|
||||
|
||||
.directory {
|
||||
&__card {
|
||||
@include shadow-1dp;
|
||||
border-radius: $card-radius;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__img { border-radius: $card-radius $card-radius 0 0 }
|
||||
|
||||
&__bar {
|
||||
background: $card-bg-color;
|
||||
padding: 8px 16px;
|
||||
|
||||
&__relationship { width: auto }
|
||||
|
||||
.display-name {
|
||||
margin-left: 16px;
|
||||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
span { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
background: $card-bg-color;
|
||||
border-radius: 0 0 $card-radius $card-radius;
|
||||
|
||||
.account__header__content {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.accounts-table__count { padding: 16px 0 }
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
@include material-transition;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mute-modal {
|
||||
@include shadow-24dp;
|
||||
background: $card-bg-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__explanation { margin-top: 16px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-bg-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
margin: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__label {
|
||||
color: $ui-text-color;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.domain {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.domain__domain-name { color: $primary-text-color }
|
||||
|
||||
&__buttons .icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
color: $ui-text-color;
|
||||
|
||||
&__backdrop {
|
||||
border-radius: 0;
|
||||
background: $progress-indicator-track-color;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
&__tracker {
|
||||
border-radius: 0;
|
||||
background: $progress-indicator-color;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-button { padding: 8px }
|
||||
|
||||
.focusable:focus .detailed-status,
|
||||
.focusable:focus .detailed-status__action-bar { background: transparent }
|
||||
|
||||
.no-reduce-motion .loading-indicator {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
&__figure {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
margin: 8px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 50%;
|
||||
animation: loading-indicator 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: $loading-indicator-color transparent transparent transparent;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: -0.45s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: -0.15s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes loading-indicator {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
background-color: $loading-indicator-color;
|
||||
height: 4px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user