@charset "UTF-8";

/*==============================================================================
 * Dark Mode
 *----------------------------------------------------------------------------
 * このサイトは色指定がページ全体に分散していて、1個1個の要素に色を
 * 塗り直すのは現実的ではない（修正漏れ・崩れのリスクが高い）。
 * そのため html 全体を反転させ、画像・動画・iframe だけ再反転して
 * 元の色に戻す手法を使う。レイアウト（幅・位置）には影響しない。
 *----------------------------------------------------------------------------*/
html.dark-mode {
  background: #fff;
  filter: invert(1) hue-rotate(180deg);
}

html.dark-mode img,
html.dark-mode video,
html.dark-mode iframe,
html.dark-mode canvas,
html.dark-mode svg,
html.dark-mode picture {
  filter: invert(1) hue-rotate(180deg);
}

/* 絵文字（🌙 など色付きで描かれる文字）は img と同じ再反転の対象。
   対象の切り分けと <span class="emoji"> の付与は
   /js/dark-mode-emoji.js が行う。 */
html.dark-mode .emoji {
  filter: invert(1) hue-rotate(180deg);
  display: inline-block;
}

/* .homeRecentList の箇条書きは text-indent の負値で先頭アイコン分の
   ぶら下げインデントを作っているが、このリストに filter: invert() の
   祖先があると、Chromiumは負のtext-indentを持つ行内のカラー絵文字
   グリフの描画位置を誤り、直前/直後の文字に重なって見える不具合が
   起きる（例: 日記一覧タイトルの絵文字が日付欄に重なる）。
   ダークモード時だけ text-indent を使わない等価なレイアウトに
   置き換えることで回避する（見た目の先頭位置は変えない）。 */
html.dark-mode .homeRecentList ul.articleList li {
  text-indent: 0;
  padding-left: 13px;
}