Aureolo:appearance

テーマ変数：

code:import.css

@import url("../Aureolo:editor/import.css");

@import url("../Aureolo:popup-menu/style.css");

@import url("../Aureolo:page-list/style.css");

code:var.css

@import url("../Aureolo:editor/var.css");

code:base.css

@import url("../Aureolo:editor/base.css");

code:etc.css

@import url("../Aureolo:editor/etc.css");

Icon font

code:var.css

html {

--icons: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 5 Brands", "AppIcons";

}

Color palette

code:var.css

:root {

--c-red-1: hsl(356 79% 60%); --c-red-2: hsl(356 72% 54%);

--c-red-3: hsl(356 69% 49%);

--c-red-4: hsl(356 80% 43%); --c-red-5: hsl(355 81% 37%);

--c-orange-1: hsl(15 82% 71%); --c-orange-2: hsl(15 82% 66%);

--c-orange-3: hsl(15 82% 62%); --c-orange-4: hsl(16 82% 57%);

--c-orange-5: hsl(16 82% 52%);

--c-yellow-1: hsl(36 95% 76%); --c-yellow-2: hsl(36 95% 70%);

--c-yellow-3: hsl(36 96% 64%); --c-yellow-4: hsl(36 95% 58%);

--c-yellow-5: hsl(36 95% 52%);

--c-green-1: hsl(129 80% 64%); --c-green-2: hsl(129 61% 55%);

--c-green-3: hsl(129 56% 46%); --c-green-4: hsl(129 65% 37%);

--c-green-5: hsl(129 81% 29%);

--c-blue-1: hsl(196 85% 71%); --c-blue-2: hsl(196 86% 61%);

--c-blue-3: hsl(196 86% 52%); --c-blue-4: hsl(196 100% 33%);

--c-blue-5: hsl(216 43% 35%);

--c-purple-1: hsl(306 31% 44%); --c-purple-2: hsl(303 52% 30%);

--c-purple-3: hsl(306 57% 30%); --c-purple-4: hsl(315 41% 26%);

--c-purple-5: hsl(319 100% 9%);

}

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

行頭がインデントされていると左寄せになる

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

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

変数（shadow）

code:var.css

html {

--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));

--page-iframe-box-shadow:

0 0 2px rgba(0, 0, 0, 0.12),

0 0 3px rgba(0, 0, 0, 0.12),

0 0 2px rgba(0, 0, 0, 0.12),

0 0 3px rgba(0, 0, 0, 0.12),

0 8px 16px rgba(0, 0, 0, 0.14),

0 8px 16px rgba(0, 0, 0, 0.14);

}

変数（画像）

code:var.css

html {

--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));

--page-image-margin: 0.5em 0.5em;

}

code:base.css

:where(.page) .line.line-title > .text, /* ページタイトル */

.stream .page .line-title, /* Streamにおける、ページタイトル */

.stream h1, /* Streamの更新日時バー */

:where(.page) :is(.line:not(.cursor-line) > .text, .line:not(.cursor-line) .quote):not(:has(.indent)):has(img.image, img.strong-image, .video-player, .iframe-video-player), /* 画像、強調記法[[]]で囲まれた画像、動画、Youtubeなどの動画 */

.stream .line:not(.cursor-line):has(img.image, img.strong-image, .video-player, .iframe-video-player) /* Streamにおける、画像、強調記法[[]]で囲まれた画像、動画、Youtubeなどの動画 */

{

text-align: center;

text-wrap: balance;

}

画像

https://img.shields.io/badge/dynamic/json.svg?color=purple&label=/Nrem-Configs&suffix=+pages&query=$.count&url=https://scrapbox.io/api/pages/nrem-configs#.svg

code:base.css

:where(.page) .line :is(.line > .text, .line .quote),

.stream .page .line {

& img.image {

/* app.css の .line .image margin: 3px 0; を上書きする */

margin: var(--page-image-margin, 0 0);

filter: var(--page-image-filter, var(--page-multimedia-filter, none));

}

& img.strong-image {

box-sizing: content-box;

filter: var(--page-image-filter, var(--page-multimedia-filter, none));

margin: var(--page-image-margin, 0 0);

max-width: 100%;

}

}

動画

code:base.css

:where(.page) .line .video-player .video {

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);

}

:where(.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;

}

code:base.css

.line .table-block {

text-align: center;

& .table-block-row {

display: flex !important;

flex-direction: row;

justify-content: safe center;

}

& .cell { text-align: start; }

}

code:import.css

@import url("../画像ズームアニメーションを変更する/style.css");

code:base.css

body {

background-color: hsl(from var(--body-bg) h s 90%);

}

.page,

.stream .page {

box-shadow: var(--page-box-shadow, var(--card-box-shadow, 0 4px 0 rgba(0, 0, 0, 0.16)));

border: var(--page-border, var(--card-border, none));

/* border-top: var(--page-border-top, var(--page-border, var(--card-border, none))); */

}

未読テロメアの配色をテーマカラーに準拠させる

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

code:base.css

.navbar-default {

background-color: oklch(from var(--navbar-bg, rgba(53, 59, 72, 0.6)) l c h / 0);

}

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

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));

}

https://gyazo.com/27262e4231623f0363272e43f7cf9f68

code:base.css

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

content: "\E062";

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

vertical-align: bottom;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

font-size: 18px; line-height: 1.0;

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

}

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

code:base.css

.navbar .row .left {

container-type: inline-size;

container-name: navbar-row-left;

}

.project-home .title {

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

font-weight: var(--project-title-font-weight, 500);

@container navbar-row-left (max-width: 767px) {

font-size: clamp(13.5px, 4cqw, var(--project-title-font-size, 15.5px));

}

}

Stream のセクション

code:base.css

.stream h1 {

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

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

}

navbar > 検索フォーム

code:base.css

.search-form .form-group input.for-mobile {

border-radius: 9999px;

}

.search-form .form-group input.for-mobile {

}

検索候補メニューの最大表示数を調整する

code:base.css

.search-form .open > .dropdown-menu {

max-height: 24em !important;

min-width: 100%;

}

ページメニューボタン

背景を設定してプレート状の外観にする

code:import.css

@import url("../Page Menuに背景色を設定する/style.css");

ドロップダウンメニューの配色を変更する

code:base.css

.dropdown-menu {

}

.page-menu ul > li > div,

.dropdown-menu > li > a {

}

.dropdown-menu>li>a:active,

color: var(--dropdown-menu-item-hover-color, hsl(0 0% 15%));

}

.dropdown-menu .divider {

}

ステータスバー

code:base.css

.footer:has(.status-bar .page-error) {

position: fixed;

top: 0 !important;

}

.status-bar {

background: transparent;

& * {

min-height: 2em !important;

font-size: 13.5px !important;

}

&>div {

padding: 5px 1em 15px 0;

align-items: top;

vertical-align: baseline;

font-weight: 500 !important;

}

}

.status-bar:has(.page-title) {

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

}

.status-bar > div.page-title {

max-width: 60vh;

text-overflow: ellipsis ellipsis;

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

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

}

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

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

}

.status-bar > div.page-list-status {

color: white;

}

.status-bar:has(.error) {

& > div.error {

background-color: var(--statusbar-error-bg, crimson) !important;

color: var(--statusbar-error-label-color, white) !important;

}

}

.status-bar > div .plan-badge {}

ブロック要素のラベル

code:base.css

.table-block .table-block-start,

.line span.code-block .code-block-start {

font-family: var(--block-start-font-family), monospace, var(--icons, "AppIcons"), var(--fallback);

font-weight: var(--block-start-font-weight);

& a {

text-decoration: var(--block-start-text-decoration, underline);

}

}

表ラベル

code:var.css

body {

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

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

--block-start-text-decoration: none;

--block-start-font-weight: 500;

--block-start-font-family: "Zilla Slab", "IBM Plex Sans JP", var(--icons, "AppIcons"), var(--fallback);

}

code:base.css

.table-block .table-block-start {

padding: 0.2em 0.334em;

font-family: var(--block-start-font-family), monospace, var(--fallback), var(--icons, "AppIcons");

font-weight: var(--block-start-font-weight);

& a {

text-decoration: var(--table-block-start-text-decoration, underline);

}

}

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

[]Zill]a

code:var.css

body {

--code-block-start-font-family: "Zilla Slab", var(--code, var(--monospace, monospace)), "IBM Plex Sans JP", var(--icons, "AppIcons"), var(--fallback);

}

code:base.css

.line span.code-block .code-block-start {

display: inline-block !important;

box-shadow: var(--onpage-box-shadow, none);

border-left: 2px solid var(--c-blue-4, midnightblue) !important;

background: var(--code-block-start-bg, hsl(0 0 15%)) !important;

color: hsL(42 35% 99%) !important;

padding: 0.2em 0.334em;

font-family: var(--block-start-font-family), monospace, var(--fallback), var(--icons, "AppIcons");

font-weight: var(--block-start-font-weight);

& a {

text-decoration: none;

}

}

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

code:import.css

@import url('/api/code/nrem-configs/0xProto/style.css');

@import url('/api/code/nrem-configs/IBM Plex Sans JP/style.css');

code:var.css

body {

--code: "0xProto", "ZxProto", "Consolas", "Menlo", "Cascadia Code";

--code-font-feature-settings: 'ss01';

}

code:base.css

code, kbd, pre, samp,

.code,

:where(.page) .line > .text.code-block {

font-family: var(--code), var(--monospace, monospace), var(--smaller-ja, "IBM Plex Sans JP"), var(--sans-serif-ja), monospace, var(--icons, "AppIcons"), var(--fallback);

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

}

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

line-height: var(--code-block-line-height, 1.375);

}

:where(.page) .line > .text.code-block {

font-size: var(--code-block-font-size, 0.9em);

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

}

Code blocks

code:import.css

code:import.css

@import url("../--deco-marking-pencil-color/style.css");

code:import.css

@import url("../下線（波線・赤）/style.css");

code:import.css

@import url('../Helpfeel記法の配色を変更する/style.css');