Repository navigation
横スクロールのつまみを薄くする - #181
Merged
Merged
横スクロールのつまみを薄くする#181
Conversation
表とコードブロックのつまみがブラウザ既定で濃く、切れ目のない帯なので 同じ比の文字より強く見えていた。ブログと同じ罫線の最下段にする。 つまみは文字ではなく線なので ink ではなく rule の段を指す。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#177 の4件目。横スクロールのつまみを薄くします。
変更
表(
.wy-table-responsive)とコードブロック(pre)のscrollbar-colorをブログと同じ罫線の最下段(#ecebeb)にし、トラックは透明にします。いままではブラウザ既定で、切れ目のない帯なので同じ比の文字より強く見えていました。つまみは文字ではなく線なので、文字のスケール(
ink)ではなく罫線の段を指します。溢れていること自体は帯の動きが示すので、つまみが唯一の合図ではありません。静止時と操作中の色は分けられません。
scrollbar-colorが取るのはつまみとトラックの2色だけで、hover は UA が導出します(::-webkit-scrollbar-thumb:hoverは使えません。Chrome はscrollbar-colorの指定時に::-webkit-scrollbar*を丸ごと無視します)。🤖 Generated with Claude Code