Stylus で 2022 Q2 版の Gmail UI ヘッダの白い部分を消す

はじめに

対象読者

• 2022 Q2 にリリースされた Gmail の UI に不満を持っている人
  • いわゆる 統合UI などと呼ばれているもの
    • https://jetstream.bz/archives/154206

• 特にヘッダの白い部分が気に入らない人

前提

• テーマが 高コントラスト の場合

what ヘッダの白い部分

• ↓ ここ

どうなる

• こうなる

対応法

Stylus のインストール

• chrome 拡張なので以下からインストールする
  • https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

新規スタイルの作成

• 以下のような感じに作成して保存

@-moz-document domain("mail.google.com") {
  .S4>:not(.Nr){
    background-color: #eee;
  }

  .G-atb {
    margin-right: 0 !important;
  }
}

• .S4>:not(.Nr) .G-atb の特定は chrome の devtools を用いておこなった

ついでにその他の箇所の調整

受信トレイ選択中の背景色

• ダークグレーから白へ

ラベルまわりのフォントサイズや余白

• フォントサイズを小さく
• 余白が取られすぎているのを小さく

検索ボックスの背景色と枠線

• ダークグレーの背景色がきついのでナシにし、代わりに枠線

最終的に自分好みのカスタマイズ用コード

• class 指定が重複しているところなどあるけれど devtools で表示されたものベースで対応している

@-moz-document domain("mail.google.com") {
  .S4>:not(.Nr){
    background-color: #eee;
  }
  .G-atb {
    margin-right: 0 !important;
  }
  
  form.aJf {
    background-color: transparent;
    border: 1px solid #aaa;
  }

  .TK .TO.nZ:active, .TK .TO.ol:active, .TK .TO.nZ, .TK .TO.ol, .byl .TK .nZ.aBP, .byl .TK .nZ.aS3, .byl .TK .nZ.aS4, .byl .TK .nZ.aS5, .byl .TK .nZ.aS6 {
    background-color: #fff;
  }
  .TK .TO.nZ:active, .TK .TO.ol:active, .TO.nZ, .TO.ol, .byl .nZ.aBP, .byl .nZ.aS3, .byl .nZ.aS4, .byl .nZ.aS5, .byl .nZ.aS6 {
    background-color: #fff;
  }
  
  .yJ {
    margin-bottom: 0;
  }
  .aAw {
    margin-bottom: 0;
  }
  
  .aAv {
    font-size: .9rem;
  }
}

おわりに

雑感

• 使い慣れた道具がいきなり変わると生産性が下がるといのは間違いなくある
• とはいえ、変化に追従していけないと老害と化すというのはあるので、留意はしていきたい
• とはいえとはいえ、別にそこは変わらんでもいいでしょ、っていうところがあることも間違いない