あったら嬉しいWebサイトスタイル変更

個人的な備忘録です。
設定しなくてもいいですが、設定することであのWebサイトがほんの少しだけ見やすくなります。

前提条件

サイトデザインを変更できる拡張機能を、ブラウザに追加する必要があります。
私は、Stylusを使っています。
ChromeとBraveで利用できることは確認できています。
他のブラウザでできるかは、各自試してください。

そして、Stylusに下記スタイルを適用させていいます。

Githubのプルリク

githubでプルリクエストを出してからマージする際に、マージ先を間違えたことありませんか。
下記は、マージ先ブランチを目立たせるための設定です。

span.commit-ref.css-truncate.user-select-contain.expandable.base-ref span.css-truncate-target {
    padding-left: 12px;
    padding-right: 12px;
    color: #fff;
    background-color: #e45252;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #e45252;
    border-radius: 70px;
    animation: Flash 1s infinite;
}
@keyframes Flash{
    50%{
        opacity: 0;
    }
}

設定すると、嘘みたいに間違いにくくなります。

Gmailの受信日時

Gmail一覧画面で、受信し一日以上経過するメールは、受信日のみが表示されます。
時刻が表示されないわけです。
下記は、Gmailに受信日時を表示させるための設定です。
日付だけでなく時刻まで表示されます。

/* Gmail Date+Time in Mail List Ver.20180603 by nukumori.org */
/* # space adjustment */
/* ## define */
  :root
  {
    --datetime-width: 14em;
  }

/* ### ja */
  :root:lang(ja)
  {
/*  --datetime-width: 9.25em; */
    --datetime-width: 11.25em;
  }

/* ### Mac */
  :root body[jscontroller="Gz34U"]
  {
    --datetime-width: 13em;
  }

/* ## apply */
  .xX
  {
    width: var(--datetime-width) !important;
    padding-right: 0;
  }

  .xX:lang(ja)
  {
    width: var(--datetime-width) !important;
  }

/* # for vertical split layout*/
  .apt
  {
    padding-right: 0 !important;
  }

  .apm
  {
    margin-right: 0 !important;
  }

/* # show full date+time of title attribute */
  .apm > span:after, /* for vertical split layout */
.xW > span:before
  {
    content: attr(title);
    color: #000;
  }

  .apm > span, /* for vertical split layout */
.xW > span
  {
    color: transparent;
    overflow: hidden;
    float: left;
  }

  .apm > span > b, /* for vertical split layout */
.xW > span > b
  {
    display: none;
  }

/* # sender width for vertical row layout */
/* ******** deleted 2012-01-21 ********
.yX.xY.apy{
  width:20% !important;
}
.yf.xY.apt{
  width:80% !important;
}
*/

/* ******** added 2018-06-03 ******** */

/* # bold unread */
  .zE .apm,
.zE .xW
  {
    font-weight: 700;
  }

/* # new look 2018 */
  body[jscontroller] .Zs .zA > .WA + .yX,
body[jscontroller] .Zs .zA > .bnk + .yX
  {
/* original width: 100% - (header: 76px) - (icon + date/time: 110px) */
    max-width: calc(100% - 76px - var(--datetime-width) - 34px);
  }

/* ******** date time ******** */
  body[jscontroller] .apm, /* for vertical split layout */
body[jscontroller] .xW
  {
    overflow: hidden;
  }

  body[jscontroller] .apm > span, /* for vertical split layout */
body[jscontroller] .xW > span
  {
    overflow: visible;
    width: calc(var(--datetime-width) + 8px);
  }

/* schedule and attachment icon */
  body[jscontroller] .Zs .zA > .yf
  {
    margin-left: 0;
  }

/* ## horizontal split datetime */
  body[jscontroller] .zA > .xW
  {
    max-width: calc(var(--datetime-width) + 8px);
    flex-basis: auto;
  }

設定すると、Gmail一覧画面に受信日時が表示されるので、だいぶ見やすくなります。