NremのCosenseテーマ互換レイヤー
settings.iconsettings #NremのCosenseテーマの開発 #ProjectCSSこのサイトのCosenseテーマとCosense標準テーマのCSS変数の対応関係
CSS変数駆動型Cosenseテーマでは不要。
NremのCosenseテーマ軽量版の nremiel.theme.core を通してCosense標準テーマを反映させるための互換レイヤー。
このサイトでは、主に「Cosenseテーマ」一覧ページに設置されている「ページのテーマを変更する記法」のプレビューボタンを設置するのに利用される。
#nowwriting
code:style.css
@container style(--overwrite-native-themes: n) {
変数交換手
Fundamentaj
code:style.css
.app {
--c-bg-bottom: var(--body-bg);
--brand-icon-y-first-stop-opacity: 0.75;
--brand-icon-x-first-stop-opacity: 0.4;
--c-bg-navbar: var(--navbar-bg);
--c-ic-navbar: var(--navbar-icon-color);
--navbar-icon-active-color: #5c96b6;
--navbar-icon-hovered-color: #8bc7e8;
--c-bg-navbar-search-form: var(--search-form-bg);
--c-fg-navbar-search-form-icon: var(--search-form-icon-color);
--search-form-icon-focus-color: #444;
--2hop-search-bg: rgba(255, 255, 255, 0.15);
--c-ic-navbar-button-new-page: var(--new-button-bg);
--c-ic-navbar-button-new-page-vertical-line: var(--new-button-vertical-color);
--c-ic-navbar-button-new-page-horizontal-line: var(--new-button-horizontal-color);
--c-ic-navbar-button-new-page-hover: var(--new-button-hover-bg);
--c-ic-navbar-button-new-page-active: var(--new-button-active-bg);
--card-title-color: rgba(255, 255, 255, 0.9);
--card-title-bg: #294252;
--card-bg: #395666;
--card-hover-bg: rgba(0, 0, 0, 0.1);
--card-active-bg: rgba(193, 203, 213, 0.1);
--card-backside: #5c96b6;
--card-description-color: rgba(255, 255, 255, 0.9);
--card-description-link-color: #6bb8ed;
--card-description-code-color: #ccc;
--card-box-shadow-color: rgba(0, 0, 0, 0.2);
--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-title-bg-pinned: #294252;
--relation-label-bg: #294252;
--relation-label-text: #fff;
--relation-label-links-bg: #5c96b6;
--relation-label-links-text: #fff;
--relation-label-empty-bg: #fb7476;
--relation-label-empty-text: #fff;
--tool-color: #578eac;
--tool-light-color: #294252;
--tool-badge-bg: #294252;
--tool-bg: #294252;
--tool-text-color: rgba(255, 255, 255, 0.87);
--c-bg-page-main: var(--page-bg);
--c-bg-page-main-lines: var(--page-bg);
--c-tx-normal: var(--page-text-color);
--c-tx-alt: var(--page-text-color);
--c-tx-strong: var(--page-text-color);
--c-tx-link: var(--page-link-color);
--c-tx-link-hover: var(--page-link-hover-color);
--x: var(--page-link-color-cursor-line);
--c-tx-link-empty: var(--empty-page-link-color);
--c-tx-link-empty-hover: var(--empty-page-link-hover-color);
--x: var(--line-title-color);
--c-tx-line-permalink: var(--line-permalink-color);
--c-bg-line-permalink: var(--page-bg);
--c-tx-code: var(--code-color);
--c-bg-code: var(--code-bg);
--x: var(--page-image-loading-border-color);
--c-bg-blockquote: var(--quote-bg-color);
--c-caret-cursor: var(--cursor-color);
/* Page menu */
--c-bg-page-manu: inherit;
--c-bg-dropdown-button-focus: inherit
--c-tx-dropdown-button-text: inherit
--c-tx-dropdown-button-icon: inherit
/* */
--c-bg-popup-menu: inherit
--shadow-box-popup-menu: inherit;
--c-tx-popup-menu-item: inherit
--border-popup-menu-item: inherit
--shadow-related-search-form-focus: inherit
--shadow-box-page-list-search: inherit;
--shadow-box-page-list-search-focus: inherit;
--c-bg-statusbar-page-title: inherit;
--c-tx-statusbar-page-title: inherit;
--c-bg-statusbar-page-status-sync-confirmed: inherit;
--c-fg-statusbar-page-status-sync-confirmed: inherit;
--c-bg-statusbar-page-status-error: inherit;
--c-tx-statusbar-page-status-error: inherit;
--c-bg-statusbar-page-list-status: inherit;
--c-tx-statusbar-page-list-status: inherit;
--c-bg-statusbar-project-status-private: inherit;
--c-ic-statusbar-project-status-private: inherit;
--c-bg-statusbar-project-plan-badge: inherit;
--c-tx-statusbar-project-plan-badge: inherit;
}
ページ
テロメア
参照：テロメアの配色
コメント：変数の対応関係が異なる
code:style.css
.app {
--c-telomere: var(--telomere-border, #e2e2e2);
--c-telomere-unread: border-color: var(--telomere-unread, #89a3ff);
--c-telomere-updated: var(--telomere-updated, #6b8cff);
--c-telomere-updated-after-load-unread: var(--telomere-updated, #6b8cff);
--c-telomere-will-delete-next: #fd7373;
}
フォント
code:style.css
@container page (width > calc(696px + 42px * 2)) {
.page,
.stream .page {
--fs-base: 15px;
--fs-code-block: var(--fs-base);
margin: inherit;
}
}
@container page (width <=calc(696px + 42px * 2)) {
.page,
.stream .page {
--h-line-base: 1.866666667;
--fs-code-block: var(--fs-base);
}
}
:root,
body {
--h-line-base: 1.866666667;
}
:root,
body,
#app-container *:not(.char-index) {
/* transition: all 0.2s linear; */
font-size: var(--fs-base);
line-height: var(--h-line-base);
font-family: var(--sans-serif);
font-variant-ligatures: inherit;
--fallback: -apple-system, BlinkMacSystemFont, "Arimo", "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Roboto Flex", "Roboto", "Open Sans", "Oxygen", "Adwaita Sans", "Cantarell", "Ubuntu Medium", "Arial", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", "Yu Gothic", "Droid Sans Fallback", "Last Resort";
--icons: inherit;
--sans-serif: var(--sans-serif-latin), var(--sans-serif-ja), sans-serif, var(--icons), var(--fallback);
--serif: var(--serif-latin), var(--serif-ja), serif, var(--icons), var(--fallback);
--monospace: monospace, var(--icons), var(--fallback);
--ffs-monospace: var(--ffs-code);
--code: var(--monospace);
--ffs-code: "";
--ipa: var(--fallback);
--paragraph: var(--paragraph-latin), var(--paragraph-ja), sans-serif, var(--icons), var(--fallback);
--fw-paragraph: 400;
--ffs-paragraph: none;
--blockquote: var(--paragraph);
--fw-blockquote: 400;
--ffs-blockquote: none;
--fs-table-block: var(--fs-base);
--italic: var(--italic-latin), var(--italic-ja), italic, var(--icons), var(--fallback);
--ffs-italic: none;
--fw-italic: 400;
--italic-bold: var(--italic);
--ffs-italic-bold: none;
--fw-italic-bold: 700;
--cursive: var(--cursive-latin), var(--cursive-ja), cursive, var(--icons), var(--fallback);
--cursive-with-lines: var(--cursive);
--strong: var(--strong-latin), var(--strong-ja), sans-serif, var(--icons), var(--fallback);
--fw-strong: 700;
--impact: "Impact", var(--strong);
--fw-impact: 700;
--trump: "Anybody", "Yu Gothic UI", var(--impact);
--fw-trump: 800;
--narrow: var(--narrow-latin), var(--narrow-ja), sans-serif, var(--icons), var(--fallback);
--ffs-narrow: none;
--f-stretch-narrow: semi-condensed;
--smaller: var(--smaller-latin), var(--smaller-ja), ui-rounded, var(--icons), var(--fallback);
--ffs-smaller: none;
--tiny: var(--tiny-latin), var(--tiny-ja), ui-rounded, var(--icons), var(--fallback);
--fs-tiny: 12px;
--fw-tiny: 500;
--tt-tiny: uppercase;
--fs-ruby: 0.61666666em;
--fw-ruby: 600;
--ui-sans-serif: -apple-system, BlinkMacSystemFont, var(--ui-sans-serif-latin), var(--ui-sans-serif-ja), ui-sans-serif, var(--icons), var(--fallback);
--ffs-ui-sans-serif: none;
--fs-ui-sans-serif: 15px;
--text-field: var(--paragraph);
--kbd: var(--code);
--fw-kbd: 700;
--ffs-kbd: ;
--hash: var(--code);
--card-title: var(--narrow), var(--smaller);
--ffs-card-title: var(--ffs-h1);
--fw-card-title: 700;
--fs-card-title: 15px;
--ta-card-title: start;
--tw-card-title: pretty;
--fs-card-title: var(--fs-ui-sans-serif);
--fs-card-title: var(--fs-card-description);
--card-description: var(--narrow), var(--smaller);
--fs-card-description: 15px;
--fs-card-description: 15px;
--h-line-card: var(--h-line-base);
--h1: var(--h1-latin), var(--h1-ja), var(--sans-serif);
--h2: var(--h1);
--h3: var(--h2);
--h3: var(--h2);
--h4: var(--h3);
/* --h5: "Barlow", "Bahnschrift", "IBM Plex Sans JP", var(--h4); */
--h5: var(--h4);
--h6: var(--h5);
--ffs-h1: none;
--ffs-h2: var(--ffs-h1);
--ffs-h3: var(--ffs-h2);
--ffs-h4: var(--ffs-h3);
--ffs-h5: var(--ffs-h4);
--ffs-h6: var(--ffs-h5);
--fw-h1: 700;
--fw-h2: 700;
--fw-h3: 700;
--fw-h4: 700;
--fw-h5: var(--fw-h4);
--fw-h6: var(--fw-h5);
--tt-h1: none;
--tt-h2: none;
--tt-h3: none;
--tt-h4: none;
--tt-h5: var(--tt-h4);
--tt-h6: var(--tt-h5);
--fs-h1: inherit;
/* 28px */
--fs-h2: 24px;
--fs-h3: 20px;
--fs-h4: 17.5px;
--ff-project-name: var(--sans-serif);
--ffs-project-name: none;
--fw-project-name: inherit;
}
:root,
body,
#app-container *:not(.char-index) {
--sans-serif-latin: ;
--sans-serif-ja: ;
--serif-latin: ;
--serif-ja: ;
--paragraph-latin: var(--sans-serif-latin);
--paragraph-ja: var(--sans-serif-ja);
--italic-latin: var(--serif-latin);
--italic-ja: var(--serif-ja);
--cursive-latin: var(--italic-latin);
--cursive-ja: var(--italic-ja);
--strong-latin: var(--paragraph-latin);
--strong-ja: var(--paragraph-ja);
--narrow-latin: var(--sans-serif-latin);
--narrow-ja: var(--sans-serif-ja);
--smaller-latin: var(--sans-serif-ja);
--smaller-ja: var(--sans-serif-ja);
--tiny-latin: var(--smaller-latin);
--tiny-ja: var(--smaller-ja);
--ui-sans-serif-latin: var(--smaller-latin);
--ui-sans-serif-ja: var(--smaller-ja);
--h1-latin: ;
--h1-ja: ;
}
code:style.css
}