Aŭreolo Simplified

How to Use

code:UserCSS.css

@import url('/api/code/nremiel/Aŭreolo_Simplified/style.css');

code:style.css

/* Cosense UserCSS: Aŭreolo Simplified user theme for Cosense */

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

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

非公開ステータスを示す鍵アイコンをプロジェクト名の後ろに表示する

code:style.css

.app:has(> .footer .kamon-locked) .navbar .row .left::after {

content: "\E062";

font-family: var(--icons, "AppIcons"), icon, ui-sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

font-size: 18px;

color: var(--navbar-title-color, deeppink);

}

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

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

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

code:var.css

.page {

--page-font-size: 15px;

--page-line-height: 1.75;

--code-block-font-size: 13.5px;

--code-block-line-height: 1.375;

}

@container page (width <= 767px) {

.page,

.stream .page {

--page-font-size: 13.5px;

--page-line-height: 1.675;

--code-block-font-size: calc(var(--page-font-size, 1em) * 0.9);

--telomere-width: 5px;

}

}

code:style.css

.page,

.editor,

.lines,

:is(.page, .stream .page) .line:not(.line-title) {

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

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

}

.page-wrapper,

.project-events {

container-type: inline-size;

container-name: page;

}

.page {

padding: var(--page-padding-top) var(--page-padding-left) var(--page-padding-bottom);

}

.line .telomere .telomere-border {

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

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

}

code:var.css

.page {

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

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

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

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

}

@container page (width <= 767px) {

.page,

.stream .page {

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

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

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

}

}

@media(max-width: 767px) {

.page {

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

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

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

}

}

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

.page {

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

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

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

}

}

既定のアイコンサイズを調整

アイコンの最小幅をインデント記号と同値にする

code:style.css

img.icon,

.stream .page img.inline-icon {

top: 0;

vertical-align: middle;

max-height: calc(0.8em * var(--page-line-height));

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

}

テーブルが横にはみ出してしまう問題の対策

code:style.css

.page,

.stream .page {

overflow-x: auto;

}

code:style.css

.line:not(.cursor-line) .cell-text {

display: inline-block;

box-sizing: content-box;

max-width: 30em;

height: 100%;

vertical-align: middle;

text-wrap: pretty;

}

インデントの幅を変数に定義

code:var.css

:root {

--indent-mark-width: 1.5em;

}

code:style.css

.line .indent-mark .pad {

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

}

引用ブロック

code:var.css

.quote {

--quote-bg-color: hsl(223 12% 90% / 20%);

--quote-text-color: hsl(0 0% 9%);

--quote-text-color: hsl(from var(--page-text-color) h s l / 91%);

--quote-border-left: hsl(45 3% 75%) solid 4px;

--quote-padding-left: 1em;

--quote-border-right: hsl(from var(--body-bg) h s l / 5%) solid 8px;

--quote-font-family: "Atkinson Hyperlegible Next", var(--paragraph-latin), var(--paragraph-ja), var(--fallback), var(--icons);

--quote-font-feature-settings: ;

--quote-font-weight: 420;

}

code:style.css

.line .quote {

display: block;

border-right: var(--quote-border-right, none);

padding-left: var(--quote-padding-left, 3px);

padding-right: var(--quote-padding-right, var(--quote-padding-left, 0));

background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));

color: var(--quote-text-color, var(--page-text-color));

font-family: var(--quote-font-family, inherit);

font-feature-settings: var(--quote-font-feature-settings);

font-variant-ligatures: common-ligatures;

font-weight: var(--quote-font-weight);

& .image {

max-width: 100%;

}

}

引用文中のインデントを通常の箇条書きにする

1. 引用文中のインデントを●にする

code:style.css

.line .quote .indent-mark .dot {

display: block;

position: absolute;

right: 9px;

top: 10px;

width: 6px;

height: 6px;

border-radius: 50%;

}

2. 引用文中のインデントのテキストの改行位置を揃える

code:style.css

.line .quote *:has(> .indent-mark):has(> .indent) {

display: inline-block;

max-width: calc(100% - var(--indent-mark-width, 1.5em));

& .indent {

display: inline-block;

}

}

引用文のテキストの折返し位置を揃える

code:style.css

.line:not(.cursor-line) .quote > .tag:has(+ *) { display: none; }

引用文の前の連続するドットを消す

code:style.css

.line:has(.indent-mark + .indent .quote)

+ .line:has(.indent-mark + .indent .quote) .dot {

display: none;

}

te

code:var.css

:root {

--sans-serif-latin: -apple-system, BlinkMacSystemFont, "Inter Variable", "Inter", "Arimo", "Roboto Flex", "Roboto";

--sans-serif-ja: "IBM Plex Sans JP", "Noto Sans JP";

--serif-latin: "Zilla Slab", "Souce Serif Pro", "Souce Serif 4", "Lora", "Crete Round", "Spectral", "Tinos";

--serif-ja: "UD Digi Kyokasho NK", "UD Digi Kyokasho NP", "GenEi Antique P", "源暎アンチック 詰", "GenEi Antique Pv5", "源暎アンチック 詰 v5", "Noto Serif JP", "IPAexMincho", "IPAex明朝";

--narrow-latin: "Roboto Flex", "Roboto Condensed", "Aptos Narrow", "Segoe Condensed", var(--sans-serif-latin);

--narrow-ja: "Yu Gothic UI", var(--sans-serif-ja);

--narrow-font-feature-settings: 'palt';

--narrow-font-stretch: semi-condensed;

--fallback: -apple-system, BlinkMacSystemFont, "Arimo", "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Inter Variable", "Inter", "Roboto Flex", "Roboto", "Oxygen", "Adwaita Sans", "Cantarell", Helvetica, "Open Sans", "Ubuntu Medium", "Arial", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Droid Sans Fallback", "Last Resort";

}

ページ本文フォントを「UD デジタル 教科書体 NK」と「Atkinson Hyperlegible Next」に変更する

Windows や macOS のシステムフォントの一つ

code:var.css

@font-face {

font-family: "UD Digi Kyokasho NK";

font-weight: 400 550;

size-adjust: 106.66%;

src: local("UD Digi Kyokasho NK-R"), local("UD デジタル 教科書体 NK-R");

}

@font-face {

font-family: "UD Digi Kyokasho NK";

font-weight: 700;

size-adjust: 106.66%;

src: local("UD Digi Kyokasho NK-B"), local("UD Digi Kyokasho NK-B Bold"), local("UD デジタル 教科書体 NK-B");

}

@font-face {

font-family: "UD デジタル 教科書体 NK";

font-weight: 400 550;

size-adjust: 106.66%;

src: local("UD Digi Kyokasho NK-R"), local("UD デジタル 教科書体 NK-R");

}

@font-face {

font-family: "UD デジタル 教科書体 NK";

font-weight: 700;

size-adjust: 106.66%;

src: local("UD Digi Kyokasho NK-B"), local("UD Digi Kyokasho NK-B Bold"), local("UD デジタル 教科書体 NK-B");

}

a

code:import.css

@import url("/api/code/nremiel/Atkinson_Hyperlegible_Next/style.css");

code:var.css

.page {

--page-font-family: var(--paragraph-latin), var(--sans-serif-latin), var(--paragraph-ja), var(--sans-serif-ja), sans-serif, var(--icons), var(--fallback);

--paragraph-latin: "Atkinson Hyperlegible Next", "Inter Variable", "Roboto Flex", "Helvetica", "Arimo";

--paragraph-ja: "UD Digi Kyokasho NK", "Arimo + Noto Sans JP", "Roboto + Noto Sans JP", "Noto Sans JP";

}

body {

}

code:style.css

.page,

.page .editor,

.stream .page,

.stream .lines {

font-family: var(--page-font-family, sans-serif), var(--fallback);;

}

イタリック体のフォントを別個で指定する

code:import.css

code:import.css

@import url("/api/code/nremiel/Zilla_Slab/style.css");

code:var.css

body {

--italic-latin: "Zilla Slab", "Lora", "Literata";

--italic-ja: ;

--ffs-italic: none;

--fw-italic: 500;

}

code:style.css

.line :is(.deco-\/, i, em):not(.level) {

font-family: var(--italic-latin, var(--paragraph-latin, var(--sans-serif-latin))),

var(--italic-ja, var(--paragraph-ja, var(--sans-serif-ja))),

var(--icons), sans-serif, var(--fallback);

font-feature-settings: var(--ffs-italic, '');

font-weight: var(--fw-italic, 400);

font-style: italic;

}

表の表示調整

セルの文字サイズを本文テキストより小さくする

セルのフォントを Narrow にする。

code:var.css

.table-block {

--table-block-cell-font-size: calc(var(--page-font-size, 15px) * 15 / 14.5);

--table-block-border: 0.35px solid hsl(42 4% 4% / 35%);

}

code:style.css

.table-block .cell {

display: inline-block;

box-align: fit-content;

border: var(--table-block-border) !important;

background-color: hsl(from var(--page-bg, transparent) h s l / 1%) !important;

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

font-size: var(--table-block-cell-font-size, 1em) !important;

font-stretch: var(--narrow-font-stretch);

font-family: var(--narrow-latin), var(--sans-serif-latin), var(--narrow-ja), var(--sans-serif-ja), sans-serif, var(--icons), var(--fallback) !important;

font-feature-settings: var(--narrow-font-feature-settings);

}

code:import.cs

@import url("/api/code/nremiel/セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化する/import.css");

@import url("/api/code/nremiel/セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化する/style.css");

@import url("/api/code/nremiel/セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化する/var.css");

一部のページ要素を中央寄せにする

インデントすると左寄せにできる。

これに伴い、レイアウトの導線に合わせて他のページ要素も中央寄せにする。

ページタイトル

code:var.css

.page {

--h1-font-family-latin: "Zilla Slab";

--h1-font-family-ja: "UD Digi Kyokasho NK", "Noto Sans JP";

--h1-font-size: calc(1.8666667 * var(--fs-base));

--h1-font-weight: 500;

--h1-font-feature-settings: '';

}

code:style.css

:is(.page, .stream .page) .line-title,

.line.line-title {

font-size: var(--h1-font-size, 1.73em);

line-height: var(--h1-line-height, var(--page-line-height, 42px));

font-weight: var(--h1-font-weight, 500);

font-family: var(--h1), var(--h1-font-family-latin), var(--paragraph-latin), var(--sans-serif-latin),

var(--h1-font-family-ja), var(--paragraph-ja), var(--sans-serif-ja), var(--icons), var(--fallback);

font-feature-settings: var(--h1-font-feature-settings);

& .text {

text-align: center;

text-wrap: balance;

}

}

Stream

code:style.css

.stream h1 {

text-align: center;

}

画像等の埋め込みメディアに影をつける

code:var.css

.page {

--onpage-box-shadow:

0 0 0.375rem rgba(0, 0, 0, 0.125),

0 0 0.25rem rgba(0, 0, 0, 0.15);

--onpage-filter-drop-shadow:

drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))

drop-shadow(0 0 6px rgba(0, 0, 0, 0.12))

drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));

}

画像

code:var.css

body {

--page-image-filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.12)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));

}

code:style.css

.image,

.strong-image,

.video-player .video {

filter: var(--page-image-filter);

.line:not(:has(.indent)) & {

vertical-align: top;

margin: 0.5em auto 0.5em auto;

}

}

code:style.css

.page .line {

& img.image {

display: block;

filter: var(--page-imape-filter, var(--page-multimedia-filter));

margin: 0.5em auto 0.5em auto;

}

&:has(.indent) img.image {

display: inline-block;

margin: 0.5em auto 0.5em 0.5em;

}

& img.strong-image {

display: block;

box-sizing: content-box;

/* box-shadow: var(--shadow-box-slipo); */

filter: var(--shadow-drop-slipo);

margin: 0.5em auto 0.5em auto;

}

}

動画

code:style.css

.page .line .video-player .video {

display: inline-block;

box-shadow: var(--page-iframe-box-shadow, var(--onpage-box-shadow));

margin: 0.5em auto 0.5em auto;

max-height: 80vdh;

max-width: calc(100% - 1.5em);

}

page .line:has(.indent) video {

display: inline-block;

margin: 0.5em auto 0.5em 0.5em;

}

.page .line .iframe-video-player iframe.youtube {

box-sizing: content-box;

box-shadow: var(--page-iframe-box-shadow, var(--onpage-box-shadow));

margin: 0.5em auto 0.5em auto;

}

Table

code:style.css

:is(.line, .stream .page .line) .table-block > * {

margin: 0 auto;

max-width: 100% !important;

text-align: center;

& > * { text-align: start; }

}

Card

code:var.css

body {

--relation-label-links-bg: hsl(from var(--search-form-bg) h s 99% / 85%);

--relation-label-empty-bg: white;

--new-button-bg: hsl(from var(--search-form-bg) h s l / calc(a * 0.5));

}

ページにアクセントカラーを設定する

code:var.css

:root {

}

html {

--navbar-bg-copy: var(--navbar-bg, midnightblue);

--search-form-bg-copy: var(--search-form-bg, deeppink);

--body-bg-copy: var(--body-bg, hsl(223 12% 90%));

}

body {

}

ページに色相コントラストの影をつける

本文テキストと色が被ってしまう

境界線が強調される

立体感が抑えられる

浮き上がっているのか沈み込んでいるのかが明確でない、不思議な印象になる

ボーダーレスな印象に近い

色覚異常にも多少の耐性がある（単色のカラーリングと比べた場合）

テーマカラーに応じて動的に色相を変化させるようとすると、調整が複雑になる

ここでは一旦決め打ちにする

code:var.css

body {

--body-bg: hsl(223 12% 90%);

--page-border-top: 8px solid hsl(0 0% 89%);

--page-box-shadow-color-primary: hsl(from midnightblue h s 50%);

--page-box-shadow-color-secondary: var(--c-purple-3);

--page-box-shadow:

0 0 0.25rem hsl(from var(--page-box-shadow-color-primary) h s l / 0.2),

2.8px 2.8px 2.2px hsl(from var(--page-box-shadow-color-tertiary, black) h s l / 0.02),

6.7px 6.7px 5.3px hsl(from var(--page-box-shadow-color-primary) h s l / 0.028),

12.5px 12.5px 10px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.035),

22.3px 22.3px 17.9px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.042),

41.8px 41.8px 33.4px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.05),

100px 50px 80px hsl(from var(--page-box-shadow-color-primary) h s l / 0.07),

-2.8px 2.8px 5.3px hsl(from var(--page-box-shadow-color-primary) h s l / 0.01),

-6.7px 6.7px 5.3px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.028),

-12.5px 12.5px 10px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.035),

-22.3px 22.3px 17.9px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.042),

-41.8px 41.8px 33.4px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.05),

-100px 50px 80px hsl(from var(--page-box-shadow-color-primary) h s l / 0.07);

}

code:style.css

.page,

.stream .page {

box-sizing: fit-content;

box-shadow: var(--page-box-shadow);

border-top: var(--page-border-top);

}

未読テロメアの配色をアクセントカラーに準拠させる

code:var.css

body {

--telomere-unread: hsl(from var(--accent-color, var(--c-purple-1, var(--navbar-bg, green))) h 65% 44% / 80%);

}

ステータスバー

code:var.css

.status-bar {

--statusbar-page-title-bg: hsl(from var(--accent-color) h s l / 65%);

--statusbar-page-list-status-bg: hsl(from var(--accent-color) h s l / 85%);

--statusbar-error-bg: hsl(from goldenrod h s l / 65%);

}

code:style.css

.status-bar {

background: transparent;

& * {

min-height: 2em !important;

font-size: 13.5px !important;

font-weight: 500 !important;

}

&:has(.page-title) {

& > div { background-color: var(--statusbar-page-title-bg, white) !important }

}

&:has(.page-list-status) {

& > div { background-color: var(--statusbar-page-list-status-bg, white) !important }

}

&:has(.page-error) {

& > div { background-color: var(--statusbar-error-bg, red) !important }

}

&>div {

padding: 5px 1em 15px 0;

align-items: top;

vertical-align: baseline;

&.page-title {

max-width: 60vh;

text-overflow: ellipsis ellipsis;

background-color: var(--statusbar-page-title-bg);

color: white;

}

&.error {

color: midnightblue;

}

&.page-list-status {

color: white;

}

& .plan-badge {}

}

}

ナビゲーションバーを透明にする

code:var.css

.navbar {

--navbar-bg: hsl(from var(--c-purple-3) h s l / 0%);

--navbar-title-color: var(--c-purple-3);

--navbar-title-font-family: "Zilla Slab", var(--narrow-latin), var(--narrow-ja), var(--sans-serif), var(--icons), sans-serif;

--search-form-bg: hsl(from var(--accent-color, midnightblue) h 35% 47% / 15%);

--c-bg-navbar-search-form: hsl(252 2% 47% / 15%);

--search-form-text-color: hsl(30 10% 96%);

--search-form-icon-color: black;

--search-form-icon-focus-color: midnightblue;

--search-form-focus-box-shadow-color: var(--accent-color, midnightblue);

--search-form-focus-box-shadow:

0 0 4px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),

0 0px 6px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),

0 0 6px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),

0 -3px 10px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),

0 8px 16px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.24);

}

code:style.css

.project-home {

font-family: var(--project-title-font-family, var(--h1, var(--narrow, sans-serif))) !important;

font-weight: var(--project-title-font-weight, 600) !important;

}

.search-form .form-group:focus-within {

box-shadow: var(--search-form-focus-box-shadow, 0 0px 0px 3px rgb(from var(--search-form-focus-box-shadow-color, rgb(102,175,233)) h s l/ .6)) !important;

}

Stream

code:var.css

body {

--stream-section-title-bg: var(--accent-color, midnightblue);

--stream-section-title-text-color: white;

}

code:style.css

.stream h1 {

background-color: var(--stream-section-title-bg);

color: var(--stream-section-title-text-color);

}

ページメニュー自体に背景を設定してプレート状の外観にする

code:var.css

.page-menu {

--page-menu-bg: hsl(0 0% 97% / 50%);

}

code:style.css

.page-menu {

background: var(--page-menu-bg, transparent);

}

プロジェクト名のフォント周りを変更

code:style.css

.project-home {

font-size: 15.5px;

font-family: "Zilla Slab", var(--sans-serif-latin), var(--sans-serif-ja), sans-serif, var(--icons, "AppIcons");

font-weight: 500;

}

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

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

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

code:var.css

html:has(.cursor-line) .navbar {

--navbar-bg: transparent;

--search-form-bg: hsl(252 2% 47% / 15%);

--search-form-text-color: midnightblue;

--navbar-title-color: var(--c-red-3);

}

code:var.css

.page {

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

--cursor-line-bg: white;

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

&:has(.cursor-line) {

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

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

}

}

code:style.css

.line.cursor-line,

.line.cursor-line.with-image,

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

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

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

.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, black));

}

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

キャレットカーソル

赤系

code:var.css

body {

--cursor-color: crimson;

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

}

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

赤系

code:var.css

body {

--text-selection-bg: var(--c-red-1);

--text-selection-bg-opacity: .4;

}

/* グラデーション */

--text-selection-bg: linear-gradient( to right, var(--c-red-1), var(--c-red-1), var(--c-red-1)) 0% center / 200% auto ;

animation: selection 5s linear infinite;

animation-direction: reverse;

/*animation-direction: alternate;*/

}

@keyframes selection {

to { background-position-x: 200%; }

}

code:style.css

.selections .selection {

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

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

}

編集直後の行のテロメア

code:var.css

body {

}

code:style.css

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

}

箇条書きの記号の配色調整

リンクの色

code:var.css

body {

--page-link-hover-color: var(--c-blue-5, midnightblue);

--card-description-link-color: var(--page-link-color);

--empty-page-link-hover-color: var(--c-red-5, crimson);

--hashtag-hover-color: var(--c-green-5);

--empty-hashtag-hover-color: var(--c-purple-5);

}

code:style.css

&.page-link { color: var(--hashtag-color, forestgreen); }

&.empty-page-link { color: var(--empty-hashtag-color, darkviolet); }

}

埋め込みコードのタイトルの表示調整

code:var.css

.code-block {

--code-block-start-bg: hsl(0 0 15%);

--code-block-start-text-color: hsL(42 35% 99%);

--code-block-start-border:

none,

2px solid var(--c-blue-4, midnightblue),

none,

none;

--code-block-start-padding: 0.334em, 0.334em;

--code-block-start-font-size: 1em;

--code-block-start-font-weight: 450;

--code-block-start-font-family: "Zilla Slab";

}

code:style.css

.code-block:has(.code-block-start) {

background: var(--code-block-start-line-bg, transparent);

}

.code-block-start {

display: inline-block !important;

font-size: var(--code-block-start-font-size, .95em) !important;

padding: var(--code-block-start-padding, 1px 2px) !important;

.line span.code-block & {}

.line span.code-block & a {

text-decoration: none;

}

}

埋め込みコードのフォントを変更する

with Reserved Font Name Cascadia Code.

This license is copied below, and is also available with a FAQ at:

code:import.css

code:var.css

body {

--code-block-font-family: "0xProto Nerd Font", "0xProto", "ZxProto", "Cascadia Code Next", "Cascadia Code", "Consolas", "Menlo", "IBM Plex Sans JP", monospace;

}

コードブロックのコードハイライトを Ubuntu Yaru 準拠に変更する

厳密な再現とまではいかないが、可能な限り近づけたい

code:import.css

@import url("./code-highlighting.css");

code:code-highlighting.css

@import url('/api/code/nremiel/nremiel.theme.code-highlight.yaru/style.css');

コードブロックのカード表示

Cosenseテーマに応じてカラーリングを変更する

現時点で色が違うものは不具合

code:var.css

:root {

}

code:import.css

@import url("./auto-colorize.css");

code:import.css