― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 7 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2023年9月11日(月) 17:57 
お世話になります。
早速ですがThunderbirdを115にアップデートしたらuserChrome.cssが無効になりました。
(OSはWindows11 Homeです)

仕様変更とのことですが、以下の内容を新しい仕様に変更お願いできますか。
※未読メッセージなどを強調させたいです。


■スレッドペインの未読メッセージの表示色を変える

treechildren::-moz-tree-cell-text(unread) {
color: red !important;
text-decoration: underline;
}

■フォルダペインの未読メッセージの表示色を変える

#folderTree > treechildren::-moz-tree-cell-text(hasUnreadMessages-true) {
color: red !important;
text-decoration: underline;
}

/* closed folder containing subfolder with unread messages */
#folderTree > treechildren::-moz-tree-cell-text(closed, subfoldersHaveUnreadMessages-true) {
color: red !important;
text-decoration: underline;
}

/* open folder containing subfolder with unread messages */
#folderTree > treechildren::-moz-tree-cell-text(subfoldersHaveUnreadMessages-true) {
color: red !important;
text-decoration: underline;
}

■フォルダペインの新着メッセージがあるアカウント名の文字色を変更する

#folderTree > treechildren::-moz-tree-cell-text(isServer-true)
{
color: black !important;
}

/* style account name with new mail */
#folderTree > treechildren::-moz-tree-cell-text(isServer-true, biffState-NewMail)
{
color: red !important;
text-decoration: underline;
}

数が多くてお手数おかけしますが、どうぞよろしくお願いします。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年9月11日(月) 21:59 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3712
うまっぽい さん、EarlgreyTea と申します。

うまっぽい さんが書きました:
早速ですがThunderbirdを115にアップデートしたらuserChrome.cssが無効になりました。

正確には userChrome.css が無効になったわけではなく、そこで指定している CSS のセレクター等が Thunderbird の画面UIの変更で使えなくなったということです。
残念ながら、私はいまそれを調査する時間をあまり取れません。
なので、もしこうしたらいいよとわかる方は、ぜひそれをご提示いただけたらと思います。

あと、CSS を人に聞くだけでなく、自分で調べられるようになった方が今後よいと思いますので、やり方のとっかかり部分をお教えします。

Thunderbird でメニュー>ツール>開発ツール (Ctrl + Shit + I) を選択します。
その最、「リモートデバッグ接続要求」という画面が出て「接続を許可しますか?」と訊いてくるので「OK」を押します。
すると「◯◯プロセスブラウザーツールボックス」という画面が開きます。
その画面とThunderbirdの画面を作業しやすいようにうまく配置しておきます。

ツールボックスのツールバー左の「インスペクター」およびその左端の矢印ボタンを使用します。
矢印ボタンを押して青字になった状態で、Thunderbirdの調べたいUI部分をクリックします。
そうすると、インスペクター画面に対応するHTML部分が表示されます。
逆にインスペクター画面で選択すると、対応するThunderbirdの画面の部分が選択されます。
こうやってCSSを書きたい部分のHTML構造を調べ、どういうセレクターにしたら指定できるか調べます。

これが基本的なやり方です

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年9月12日(火) 10:06 
EarlgreyTea様ありがとうございます。

開発ツールの手順とても参考になりました。

しかし、試したところうまくできません。

スレッドツリーの未読色を赤に変えるテストをしてみました。
開発ツールで以下のようにcssを変更しました。

#threadTree tbody [data-properties~="unread"] {
font-weight: bold;
color: red; /* ここを追加 */
}
結果は思い通りに未読メッセージが赤文字となりましたが、userChome.cssにそのままコピペしてThunderbirdを再起動したらcssが反映されてませんでした。

コピペでは駄目でしょうか?

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年9月12日(火) 21:18 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3712
UI側で設定していないプロパティならともかく、
userChrome.css で上書きしようとしているわけですから「!important」は必須です。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年9月13日(水) 10:54 
オフライン

登録日時: 2023年9月13日(水) 10:07
記事: 1
うまっぽい さん、Heartfield です。

調査方法は EarlgreyTea さん が非常に詳しく書いてくださっているので、試していただければと思います。

ご参考に。

コード:
/* フォルダツリーで未読メッセージがあるフォルダの文字色を青色に変更 */
.unread > .container > .name {
  color: blue !important;
}

/* フォルダツリーで新着メッセージがあるフォルダ名の文字色を赤色に変更 */
.new-messages > .container > .name {
  color: red !important;
}

/* フォルダツリーで未読メッセージがあるフォルダを選択したときのフォルダの文字色を白色に変更 */
#folderTree:focus-within li.selected.unread > .container > .name {
  color: white !important;
}

/* メッセージリストで未読メッセージの文字色を青色に変更 */
tr[data-properties~="untagged"][data-properties~="unread"] {
  color: blue !important;
}

/* メッセージリストで未読メッセージを選択したときの文字色を白色に変更 */
tr[data-properties~="untagged"][data-properties~="unread"].selected {
  color: white !important;
}

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年9月13日(水) 16:27 
EarlgreyTea様

!importantの意味がわかってませんでした。
そもそもcssも簡単なものしか理解してません。
大変勉強になりました、ありがとうございました。


Heartfield様

やりたいことがご教授いただいたコードでできました。
ありがとうございました。
そのコードを見ながらEarlgreyTea様に教えていただいた開発ツールで確認するととても勉強になります。

EarlgreyTea様、 Heartfield様
大変お世話になり、ありがとうございました。
今後仕様変更があっても自力で出来そうです!

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年10月19日(木) 18:07 
参考までですが私の好きなパターンで下記で動きました。


#threadTree tr:nth-of-type(odd) {
background-color: #E9EFF7;
}

:root {
--thread-pane-unread-color: #FF0000 !important;
}

#threadTree tbody [data-properties~="unread"] {
color: var(--thread-pane-unread-color);
}

.unread > .container > .name,
.new-messages > .container > .name {
color: #FF0000 !important;
}

#folderTree:focus-within li.selected.unread > .container > .name,
#folderTree:focus-within li.selected.new-messages > .container > .name {
color: #ffffff !important;
}

.unread > .container > .unread-count {
background-color: #FF0000 !important;
}

#folderTree:focus-within li.selected > .container > .unread-count {
background-color: #ffffff !important;
color: #FF0000 !important;
}

_________________
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36


通報する
ページトップ
  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 7 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: Google [Bot] & ゲスト[104人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean