相対的なカーソル行ハイライト

UserCSS.icon

自分の編集箇所にフォーカスしやすくする。

table:このUserCSSの全てを説明するテーブル

これ 「カーソル行ハイライト」

カーソル行の文字 そのまま (任意) そのまま

カーソル行の背景 そのまま (任意) 暗転

その他の行の文字 薄くする そのまま

その他の行の背景 薄くする そのまま

このUserCSSは、カーソル行以外のテキストのコントラストと視認性を意図的に低下させることで、ノイズとなる情報を減らします。

つまり、自分が今編集している箇所を相対的に強調します。

共同Cosenseで複数人で同じページを編集しているときに、他の人のテキスト編集が気にならないようにします。

初期値は若干薄くする程度

お好みで明度を変更してください

相対的なカーソル行ハイライト（opacity ver.）

ページ本文にフォーカスがあるとき、カーソルのない行の透過度を上げる

画像や文字装飾等の表示も透過される

code:style.css

body {

--line-not-cursor-line-opacity: 0.65; /* 0.65 はガンマ補正込みで約 0.8 相当 */

--cursor-line-bg: ;

--cursor-line-text-color: ;

--cursor-line-margin-bg: hsl(from var(--cursor-color, var(--telomere-updated, darkorange)) h 79% 60% / 10%);

}

:where(.page) .lines > .cursor-line:not(:has(> .code-block)) {

background-color: var(--cursor-line-bg, transparent);

}

/* コードブロックのある行にフォーカスがない時だけコードブロックの opacity を下げる */

:where(.page) .lines:has(> .cursor-line > .code-block) > .line:not(.cursor-line) > .code-block {

opacity: 1;

}

:where(.page) .lines:has(> .cursor-line) > .line:not(.cursor-line) > *:not(.telomere) {

opacity: var(--line-not-cursor-line-opacity, 0.65);

}

.cursor-line::before {

content: "";

display: inline-block; position: absolute; z-index: 0; right: 100%;

min-height: 100%;

width: calc(var(--page-padding-left, 21px) - var(--telomere-width, 5px));

background-color: var(--cursor-line-margin-bg);

}

:where(.page) .editor:has(> .pointer-event > .lines > .cursor-line) .shared-cursors .cursor .user-flag {

opacity: var(--line-not-cursor-line-opacity, 0.65);

}

旧・相対的なカーソル行ハイライト（変数上書きver.）

文字色と背景色の変数を上書きして編集時にカーソル行のコントラストを上げ、他の行のコントラストを下げる

背景が暗色のダークテーマやページ背景が透明な場合に、変数を個別に設定し直す必要がある

プロジェクトごとに値を設定し直す必要がある

画像や文字装飾等の表示は基本的にそのまま

code:style-var-ver.css

body {

--page-bg: hsl(0, 0%, 99%);

--cursor-line-bg: white;

--page-text-color: hsl(0, 0%, 4%);

/* --page-text-color-not-cursor-line: hsl(255, 4%, 38%); */

--page-text-color-not-cursor-line: hsl(257, 4%, 35%);

}

.line.cursor-line,

.line.cursor-line:has(.indent-mark) .indent,

.line.cursor-line:has(img.image),

.line.cursor-line:has(.altalttext) {

background: var(--cursor-line-bg);

}

.page:has(.cursor-line) .line:not(.cursor-line) .text {

color: var(--page-text-color-not-cursor-line, var(--page-text-color));

}