白くしたくて白くした
https://draft.goat.me/6a3esTnU
のコピペ＋改造で白くしてみた。
cssを作成後、
/home/mastodon/live/app/javascript/styles
以下にファイルを置き、
/home/mastodon/live/app/javascript/styles/application.scss
にそのファイルを追加。
RAILS_ENV=production bundle exec rails assets:precompile
でプリコンパイルして、
systemctl restart mastodon*
で再起動。無事白くなった。
React.jsのコメントアウト
mastodonのjsファイルをコメントアウトするのに苦労した。
React.jsというものが使われていてコメント文は {/* */}
で囲んでコメントアウトする。
React.js
React.jsとは、Facebookがオープンソースで提供しているUIの構成部品を作るためのライブラリ。html5が必須です。
JSX
React.jsでは、JSXというタグ技術（Facebookが開発している）を使います。これはプリコンパイルが必要です。そして、JSXのコメントアウトの形式が、{/* */}なので、mastodonもそうなるということです。
/home/mastodon/live/app/javascript/styles/mastodon
のforms.scssでcheckboxのcolorによりユーザ設定のカラー変更が可能。
けど、
app/javascript/styles/mastodon/variables.scss
のprimary-text-colorを変更するのが正しい気がする。
タイトル変更
例えば、
/home/mastodon/live/app/views/about/show.html.haml
- content_for :page_title do
= site_hostname
のsite_hostnameを任意の文字列に変更すると、タイトルが変更される。
メタタグ変更
- content_for :header_tags do
%meta{:name => "description", :content => "ここに文字列"}
%meta{:name => "keywords", :content => "ここにキーワード"}
とする。
@ユーザ名画面
@ユーザ名画面の上部に黒いところが残るのは、
/home/mastodon/live/app/javascript/styles/mastodon/landing_strip.scss
の
.landing-strip {
background: 色
}
を修正すれば変わる。
下部の「リモートフォロー」と書いてあるところは、「カード」と呼ぶらしい。
ここは、accounts.scssの
.card {
background-color: red;
}
で変更する。
また、
&::after {
background: rgba(darken($ui-base-color, 8%), 0.5);
}
も効いているので注意。
右側のプロフィール部分の背景は、
.card__bio {
background: rgba(darken($ui-base-color, 8%), 0.8);
}
が効いている。
/aboutの背景は、下部が
basics.scssの
&.about-body {
background: darken($ui-base-color, 8%);
}
上部は、
.header-wrapper {
background: $ui-base-color;
background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color);
が効いているけど、それだけではない。
判明仕切れなかった。
「ログイン」等のボタンの色は、$primary-text-colorの設定。
または、forms.scssの button, .button, .block-buttonの項目。
トゥート画面の写真選択ボタンの背景色は、custom.scssの
.compose-form__buttonsの変更による。
$ui-base-colorでトップ画面を薄くすると絵文字パレットの文字などが薄くなる問題。
$ui-text-colorをvaluables.scssで定義し、emoji_picker.scssのemoji-martのcolorを$ui-text-colorにした。
aboutページのH1の下のキャプションのような小さな文字が薄いので、
about.scssの
h1
->small
のcolorで調整した。
コメント欄のプルダウン内のラベルが薄くて見えなくなったので、
components.scssの
.privacy-dropdown__option__content
を$ui-text-colorに。
は
$classic-secondary-color
->
テキストエリアの文字が薄くてしょうがないので、
components.scssの
.spoiler-input__input{
color:
}
を変更した。
テーマカラーの変更はここが参考
https://qiita.com/tumujin/items/c0c9d39f05af4f52bfc7
参考
config/locales
から表示ワードを変更
app/javascript/images
画像を変更
から
参考予定
http://www.dzeta.jp/~junjis/code_reading/index.php?Mastodon%E3%82%92%E8%AA%AD%E3%82%80%2F%E7%94%BB%E9%9D%A2%E6%8F%8F%E7%94%BB%E3%81%AE%E6%B5%81%E3%82%8C
http://www.dzeta.jp/~junjis/code_reading/index.php?Mastodon%E3%82%92%E8%AA%AD%E3%82%80%2F%E7%94%BB%E9%9D%A2%E6%8F%8F%E7%94%BB%E3%81%AE%E6%B5%81%E3%82%8C
