Aureolo:editor

code:style.css

@import url('./base.css');

@import url('./var.css');

@import url('./etc.css');

画面幅に応じてページの表示スケールを変更する

さらに、フォントサイズと行間も小さくする

コードブロックのフォントサイズも変更する

code:var.css

.page {

--page-max-font-size: 15px;

--page-min-font-size: 13.75px;

--page-font-size: clamp(var(--page-min-font-size, 14px), (767cqw / 15 / 29), var(--page-max-font-size, 15px));

--page-line-height: calc(28 / 15);

--page-min-line-height: 1.75;

--telomere-width: 5px;

/* 次の変数は他のUserCSSから参照するためのもの */

--page-width: calc(100% + var(--page-padding-left, 42px) + var(--page-padding-right, var(--page-padding-left, 42px)));

--calculated-paragraph-line-height: calc(var(--page-font-size, 15px) * var(--page-line-height));

/* --page-layout-unit: calc(var(--page-font-size, 15px) * var(--page-line-height) / 4); */

--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 42px */

--page-padding-right: var(--page-padding-left, 49px);

--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */

--page-padding-left: calc(var(--page-layout-unit, 7px) * 7); /* 49px */

}

@container page (max-width: 767px) {

.page {

--page-padding-top: calc(var(--page-layout-unit, 7px) * 4); /* 28px */

--page-padding-right: calc(var(--page-layout-unit, 7px) * 3); /* 21px */

--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */

--page-padding-left: calc(var(--page-layout-unit, 7px) * 3); /* 21px */

}

}

code:base.css

.page-wrapper,

.project-events {

container-type: inline-size;

container-name: page;

}

.editor,

.stream .page {

font-size: var(--page-font-size, 15px);

font-size-adjust: var(--page-font-size-adjust, unset);

line-height: var(--page-line-height, 24px);

}

.app:not(.presentation) .page,

.stream .page {

padding:

var(--page-padding-top, 42px)

max(21px, var(--page-padding-right, var(--page-padding-left, 49px)))

var(--page-padding-bottom, 35px)

max(21px, var(--page-padding-left, 49px));

}

.line .telomere .telomere-border {

left: calc(-1 * max(21px, var(--page-padding-left, 49px)));

min-width: var(--telomere-width, 5px);

}

@container page (max-width: 767px) {

.editor,

.stream .page {

line-height: var(--page-min-line-height, var(--page-line-height, 24px));

}

.line .telomere .telomere-border {

left: calc(-1 * max(21px, var(--page-padding-left, 21px))) !important;

}

}

@media (min-width: 768px) and (max-width: 991px) {

:where(.app:not(.presentation)) .page { padding: inherit; }

}

@media (max-width: 767px) {

:where(.app:not(.presentation)) .page { padding: inherit; }

.line .telomere .telomere-border {

left: inherit;

width: inherit;

}

}

重いので一旦無効化しておく

code:import.css

code:disabled

@import url("../箇条書きのドットの大きさを可変にする/style.css");

インデントの幅を変数に

code:var.css

html {

--indent-width: 1.5em;

}

code:base.css

.line .indent-mark .pad {

width: var(--indent-width, 1.5em);

}

code:etc.css

.line .indent {

vertical-align: top !important;

}

.line .indent-mark .pad {

vertical-align: top !important;

}

編集モード

code:base.css

).cursor-line) {

--navbar-title-color: var(--edit-mode-navbar-title-color);

--search-form-bg: var(--edit-mode-search-form-bg);

--page-menu-opacity: var(--edit-mode-page-menu-opacity, 1);

--expandable-menu-bg: var(--edit-mode-expandable-menu-bg, var(--page-menu-bg, var(--search-form-bg)));

}

編集時に検索バーの背景色の透明度を上げる

編集時にプロジェクト名を赤字にする

さらに検索フォームのテキストのコントラストを上げる

編集時のカーソル行ハイライト

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

code:base.css

.cursor-line:not(.quote-line,:has(> .code-block, > .table-block)) {

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

}

:where(main) .lines:has(> .cursor-line) > .line:not(.cursor-line) > :is(.text, .telomere, .table-block) {

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

}

:where(main) .lines:has(> .cursor-line > .code-block) > .line:not(.cursor-line) > .text.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);

}

キャレットカーソルの視覚効果

画像のある行にフォーカスしたときの視覚効果

code:base.css

.cursor-line.with-image {

display: inline-block;

animation-duration: 1.67s;

animation-name: cursor-line-with-image;

animation-timing-function: ease-out;

}

@keyframes cursor-line-with-image {

from {

}

to {

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

}

}

編集中に画像URLのプレビューを表示する

code:import.css

@import url("../編集時に画像URLのプレビューを表示する/style.css");

編集中にアイコン記法のプレビューを表示する

code:import.css

@import url("../編集時にアイコン記法のプレビューを表示する/style.css");

編集周りのUIの配色を統一する

キャレットカーソル

赤系

code:base.css

body {

caret-color: var(--cursor-color, var(--page-text-color));

}

ユーザーフラッグの色

code:base.css

.shared-cursors .cursor {

background-color: var(--user-flag-bg, green);

}

.shared-cursors .cursor .user-flag {

background-color: var(--user-flag-bg, green);

}

テキスト選択範囲のハイライト

code:base.css

.selections .selection {

opacity: var(--text-selection-bg-opacity, .4);

background: var(--text-selection-bg, green);

}

編集直後の行のテロメア

code:base.css

.line .telomere .telomere-border.updated-after-load.unread {

}

code:base.css

パーマリンク箇所の強調

code:var.css

@keyframes line-permalink {

from {

background-color: var(--line-permalink-activated-init-bg, hsl(from var(--line-permalink-color, rgb(234 218 74)) h s l / 100%));

}

to {

background-color: var(--line-permalink-color, rgb(234 218 74 / 0.75));

}

}

code:base.css

.line.permalink {

/* animation-duration: 1.15s; */

animation-duration: var(--line-permalink-activated-animation-duration, 0.85s);

animation-name: line-permalink;

animation-timing-function: ease-out;

}

code:etc.css

.line.cursor-line { min-height: 100% !important; }