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

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

自分が今編集している箇所以外のテキストの視認性を意図的に低下させて、ノイズとなる情報を減らす

自分が現在編集している行が相対的に強調される

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

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

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

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

画像や文字装飾等も薄くなる

code:style.css

body {

--line-not-cursor-line-opacity: 0.65;

--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) .line.cursor-line {

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

}

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

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

/* &.telomere { opacity: 1; } */

}

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

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

opacity: 1;

}

.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-2.css

body {

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

--cursor-line-bg: hsl(from var(--page-bg) h s calc(l + 1%));

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

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

--page-text-color-not-cursor-line: hsl(from var(--page-text-color, black) h s l / 0.677);

}

code:style-2.css

.line.cursor-line,

.line.cursor-line .indent,

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

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

background: var(--cursor-line-bg, var(--page-bg, white));

}

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

}

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

上記の「opacity ver.」と「文字色上書きver.」を組み合わせる方式

通常のテキストと、リンクや画像など他の強調要素とのコントラストに差をつけることが可能になる

変数

code:style-hybrid.css

body {

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

--cursor-line-bg: hsl(from var(--page-bg) h s calc(l + 1%));

--cursor-line-quote-bg: hsl(from var(--quote-bg-color, hsl(0 0 0 / 5%)) h s calc(l + 1%));

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

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

--page-text-color-not-cursor-line: hsl(from var(--page-text-color, black) h s l / 0.823);

--line-not-cursor-line-opacity: 0.823;

}

中身

code:style-hybrid.css

*:has(> *:is(

.editor,

.scroll-container,

.stream .page .line)

) {

--page-text-color-copy: hsl(from var(--page-text-color, hsl(0 0% 27%) h s

calc(((l + 0.5) * (l + 0.5) - 0.5) / 2)));

}

.editor,

.scroll-container,

.stream .page .line {

--body-bg: crimson;

}

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

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

&:has(.code-block) {

opacity: inherit !important;

& *:not(.char-index):not(.code-block):not(.quote) {

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

}

& *:not(.char-index):not(.code-block):not(.quote) {

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

}

}

}

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

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

}

.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, var(--page-bg));

}