軽量版Termika Radiado
https://img.icons8.com/material-sharp/96/angel.png--project-theme nremiel.aureoloこのサイトのCosenseテーマ #ProjectCSS #UserCSS #NremのCosenseテーマ軽量版
Termika Radiado をパフォーマンス面の問題のある@container style(--var)を利用しないようにしたもの
&Firefox 対策
使い方
ブラウザ拡張や Cosense に次の UserCSS を追加する。
対応サイト:*://scrapbox.io/*
code:usercss.css
@import "https://scrapbox.io/api/code/nremiel/%E8%BB%BD%E9%87%8F%E7%89%88Termika_Radiado/style.css";
中身
nremiel.aureolo rev. 2025-10-14
nremiel.theme.core
nremiel.theme.code-highlight.yaru-dark
settings/fonts – settings/theme/nremiel.aureolo/fonts に移行予定。
code:style.css
/* Cosense theme «Termika Radiado» */
/* Author: Nrem (https://scrapbox.io/nremiel/Nrem) */
/* Latest version: https://scrapbox.io/nremiel/settings%2Ftheme%2Fradiado-dark */
@import "/api/code/nremiel/settings%2Ffonts/style.css";
@import "/api/code/nremiel/nremiel.theme.core/style.css";
@import "/api/code/nremiel/nremiel.theme.code-highlight.yaru-dark/style.css";
body,
body *:has(.app),
.app {
--current-project-skin-name: "Termika Radiado (rev. 2025-10-14)";
--body-bg: var(--c-bg-bottom);
}
body,
body *:has(.app),
.app,
.app *:not(.char-index) {
--paragraph-latin: "Zilla Slab", "Atkinson Hyperlegible Next", var(--serif-latin);
--paragraph-ja: "BIZ UDGothic", "GenEi Antique", "源暎アンチック", "GenEi Antique v5", "源暎アンチック v5", var(--tiny-ja);
--fw-paragraph: 450;
--strong: var(--paragraph-latin). "UD Digi Kyokasho NP", var(--paragraph-ja);
--h1-latin: "Libertinus Serif Display", "Libertinus Serif", "EB Garamond";
--h1-ja: "UD Digi Kyokasho NK", "GenEi Antique P", "源暎アンチック 詰", "GenEi Antique Pv5", "源暎アンチック 詰 v5", "Noto Serif JP", "IBM Plex Sans JP", "Yu Gothic";
--h2: var(--h1);
--h3: "Zilla Slab", var(--h2);
--h4: var(--h3);
--ffs-h1: 'ss05';
--ffs-h2: var(--ffs-h1);
--ffs-h3: '';
--ffs-h4: var(--ffs-h3);
--fw-h1: 550;
--fw-h2: 550;
--fw-h3: 600;
--fw-h4: 650;
--fw-strong: 700;
--blockquote: var(--smaller);
--ffs-blockquote: '';
--fw-blockquote: 400;
}
body,
body *:has(.app),
.app {
--c-ui-accent-color: var(--c-purple-3);
--c-caret-cursor: var(--c-orange-5);
--c-bg-text-selection: var(--c-red-5);
--c-bg-text-selection: var(--c-light-5);
--c-bg-bottom: var(--c-nrem-vervo-6);
--c-border-page-main-top: hsl(from var(--c-dark-5) h 65% 50%);
--c-border-page-main-top: var(--c-nrem-magiero-5);
--c-border-page-main-top: hsl(260 35% 15%);
--c-border-page-main-top: hsl(from var(--c-red-4) h 35% 15%);
--border-page-main-top: 8px solid hsl(from var(--c-border-page-main-top) h s 18%);
--border-page-main-top: 8px solid var(--c-border-page-main-top);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main-alt: var(--c-purple-3);
--c-shadow-box-page-main-alt: hsl(from var(--c-red-5) h s 50%);
--shadow-box-page-main:
0 0 0.25rem rgb(from var(--c-nrem-sango-4) r g b / 0.2),
2.8px 2.8px 2.2px hsl(0 0 0 / 0.02),
6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.028),
12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),
22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),
41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.05),
100px 100px 80px rgb(from var(--c-shadow-box-page-main) r g b / 0.07),
-2.8px 2.8px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.01),
-6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.028),
-12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),
-22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),
-41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.05),
-100px 100px 80px rgb(from var(--c-shadow-box-page-main) r g b / 0.07);
--c-bg-card: var(--c-bg-page-main);
--c-bc-card-topline: var(--c-border-page-main-top);
--c-bc-card-topline: midnightblue;
--c-bc-card-topline: var(--c-nrem-magiero-4);
--c-bg-card-pinned: var(--c-red-5);
--c-bc-card-pinned: var(--c-nrem-sango-4);
--c-fg-card-backside: var(--c-red-2);
--c-tx-card-title: var(--c-tx-alt);
--c-tx-card-title: var(--c-tx-h2);
--c-tx-card-description: var(--c-light-5);
--shadow-box-card: var(--shadow-box-page-main);
--c-bg-page-main: #161616;
--c-bg-page-main-lines: #181715;
--c-bg-page-main-lines: var(--c-nrem-vervo-5);
--c-bg-current-line: var(--c-nrem-vervo-3);
--c-shadow-box-page-main-lines: black;
--c-shadow-box-page-main-lines-alt: black;
--shadow-box-page-main-lines:
0 0 0.25rem rgb(from var(--c-shadow-box-page-main-lines) r g b / 0.2),
0 0 80px rgb(from var(--c-shadow-box-page-main-lines) r g b / 0.07),
0 0 80px rgb(from var(--c-shadow-box-page-main-lines) r g b / 0.07),
0 0 33.4px rgb(from var(--c-shadow-box-page-main-lines-alt) r g b / 0.55),
8 0 33.4px rgb(from var(--c-shadow-box-page-main-lines-alt) r g b / 0.55);
--bg-page-lines-line-section: linear-gradient(var(--c-dark-5) 65%, hsl(from var(--c-bg-page-main-lines) h s l / 35%) 35%);
--bg-page-lines-line-section: var(--c-bg-page-main-lines);
--c-telomere: hsl(from var(--c-red-4) h 35% 10%);
--c-telomere-unread: var(--c-nrem-larmo-4);
--c-telomere-updated-after-load: var(--c-green-4);
--c-telomere-updated-after-load-unread: hsl(from var(--c-red-4) h 55% 15%);
--c-fg-indent-mark: hsl(from var(--c-nrem-nervo-1) h s l / 40%);
--c-fg-indent-mark: hsl(from var(--c-Material-yellow-600) h s l / 50%);
--c-bg-indent-level-0: hsl(from var(--c-bg-page-main) h s l / 50%);
--c-bg-indent-level-1: var(--c-bg-page-main-lines);
--c-bg-indent-level-2: hsl(from var(--c-bg-bottom) h s 10%);
--c-bg-indent-level-3: hsl(from var(--c-nrem-magiero-5) h s 8%);
--c-bg-indent-level-4: hsl(from var(--c-bg-bottom) h s 6%);
--c-bg-a-indent-opacity: 1;
/* --c-tx-normal: var(--c-nrem-osto-2); */
--c-tx-normal: hsl(208 25% 70%);
--c-tx-normal: hsl(from var(--c-Material-amber-400) h s l / 80%);
--c-tx-normal: hsl(from var(--c-Material-yellow-400) h s l / 80%);
--c-tx-card-description: var(--c-tx-normal);
--c-tx-alt: var(--c-nrem-nervo-2);
--c-tx-strong: hsl(from var(--c-nrem-nervo-1) h 30% l / 80%);
--c-tx-strong: hsl(from var(--c-nrem-osto-2) h s l / 70%);
--c-tx-strong: hsl(from var(--c-tx-normal) h s l / 75%);
--c-tx-strong: hsl(from var(--c-tx-normal) h s calc(l - 1%));
--c-tx-week: hsl(from var(--c-nrem-nervo-1) h s l / 75%);
--c-tx-link: hsl(from var(--c-blue-2) h s l / 85%);
--c-tx-link-hashtag: hsl(from var(--c-green-2) h s l / 80%);
--c-tx-link-empty: var(--c-red-1);
--c-bg-line-permalink: hsl(from var(--c-nrem-magiero-4) h s l / 35%);
--c-bg-line-permalink: hsl(from var(--c-red-4) h s l / 35%);
--c-bg-code: var(--c-dark-1);
--c-tx-code: var(--c-light-4);
/* --c-tx-h1: var(--c-nrem-nervo-6); */
/* --c-tx-h1: hsl(from var(--c-nrem-nervo-2) h s l / 80%); */
--c-tx-h1: hsl(from var(--c-Material-yellow-600) h s l / 70%);
--c-tx-h1: hsl(from var(--c-nrem-nervo-5) h 75% 50% / 100%);
/* --c-tx-h2: var(--c-nrem-nervo-4); */
--c-tx-h2: hsl(from var(--c-Material-amber-400) h s l / 70%);
/* --c-tx-h3: var(--c-nrem-nervo-3); */
--c-tx-h3: hsl(from var(--c-Material-yellow-500) h s l / 70%);
--c-tx-h4: var(--c-nrem-nervo-5);
--c-tx-h4: hsl(from var(--c-nrem-nervo-5) h s l / 80%);
--border-section: calc(0.05rem * var(--h-line-base)) solid hsl(from midnightblue h s l / 0.42);
--c-bg-blockquote: hsl(from var(--c-libadwaita-dark) h s 11%);
--c-bg-blockquote: var(--c-nrem-vervo-4);
--c-tx-blockquote: #9baec8;
--c-tx-blockquote: var(--c-nrem-nervo-5);
--c-tx-blockquote: var(--c-light-5);
--c-border-blockquote-left: var(--c-purple-3);
--c-border-blockquote-left: #9baec8;
--c-border-blockquote-left: hsl(from var(--c-tx-blockquote) h s l / 65%);
--border-blockquote-left: var(--c-border-blockquote-left) solid 4px;
/* --c-bg-navbar: rgb(34, 34, 34); */
--c-bg-navbar: rgba(30, 30, 30, 82.5%);
--c-bg-navbar: hsl(from var(--c-libadwaita-dark) h s l / 15%);
--c-bg-navbar: hsl(from var(--c-nrem-magiero-7) h s l / 32.5%);
/* --c-tx-navbar: var(--c-light-3);
--c-tx-navbar: var(--c-light-5); */
--c-tx-navbar: var(--c-nrem-nervo-3);
--c-ic-navbar: var(--c-tx-navbar);
--c-tx-navbar-project-name: var(--c-nrem-nervo-5);
--c-tx-navbar-project-name: hsl(from var(--c-nrem-nervo-6) h s l / 80%);
--c-tx-navbar-project-name: hsl(from var(--c-nrem-sango-2) h 50% 65% / 80%);
--c-bg-navbar-search-form: rgb(17, 17, 17);
--c-bg-navbar-search-form: hsl(from var(--c-dark-4) h s l / 35%);
--c-bg-navbar-search-form-focus: var(--c-nrem-magiero-6);
--c-tx-navbar-search-form-focus: var(--c-nrem-nervo-4);
--c-fg-navbar-search-form-icon: var(--c-light-3);
--c-tx-navbar-search-form: var(--c-light-3);
--c-tx-navbar-search-form-default-text: var(--c-light-5);
--shadow-box-navbar-search-form-focus: ;
--c-tx-toolbar-cardlist: var(--c-light-5);
--c-bg-dropdown-menu: var(--c-dark-5);
--c-tx-dropdown-menu: var(--c-light-4);
--c-tx-dropdown-menu-focus: var(--c-light-3);
--c-tx-dropdown-menu-activated: var(--c-ui-accent-color);
--c-border-dropdown-menu-activated: var(--c-ui-accent-color);
--c-bg-page-manu: hsl(from var(--c-dark-5) h s l / 85%);
--c-bg-page-menu: hsl(from var(--c-nrem-magiero-7) h 75% l / 32.5%);
--c-bg-dropdown-button-focus: var(--c-light-4);
--c-bg-dropdown-button-focus: var(--c-nrem-nervo-6);
--c-tx-dropdown-button-text: var(--c-tx-normal);
--c-tx-dropdown-button-text: var(--c-nrem-nervo-6);
--c-tx-dropdown-buttom-text: hsl(from var(--c-nrem-sango-2) h 50% 65% / 80%);
--c-bg-popup-menu: var(--c-nrem-vervo-6);
--c-tx-popup-menu-item: var(--c-tx-dropdown-menu);
--border-popup-menu-item: 2px solid var(--c-dark-5);
--shadow-box-popup-menu: var(--shadow-box-slipo);
--c-bg-related-search-form: #e2e1e2;
--c-bg-related-search-form: var(--c-dark-5);
--c-bg-related-search-form-focus: hsl(0, 0%, 95%);
--c-bg-related-search-form-focus: var(--c-nrem-osto-1);
--c-tx-related-search-form: black;
--border-related-search-form-focus: 3px solid var(--c-ui-accent-color);
--shadow-box-page-list-search-focus: inherit;
--c-bg-statusbar-page-title: var(--c-purple-4);
--c-tx-statusbar-page-title: var(--c-light-3);
--c-bg-statusbar-page-status-sync-confirmed: var(--c-green-4);
--c-fg-statusbar-page-status-sync-confirmed: var(--c-light-1);
--c-bg-statusbar-page-status-error: var(--c-red-4);
--c-tx-statusbar-page-status-error: var(--c-light-2);
--c-bg-statusbar-page-list-status: var(--c-purple-4);
--c-tx-statusbar-page-list-status: var(--c-light-3);
--c-bg-statusbar-project-status-private: var(--c-blue-4);
--c-ic-statusbar-project-status-private: var(--c-light-1);
--c-bg-statusbar-project-plan-badge: var(--c-bg-navbar);
--c-tx-statusbar-project-plan-badge: var(--c-tx-navbar-project-name);
& .line:has(.telomere.updated-after-load.unread) {
--c-tx-normal: hsl(from var(--c-red-5) h s 50%);
}
&:has(.line.cursor-line) {
--c-telomere: hsl(from var(--c-dark-4) h s l / 35%);
--c-bg-current-line: hsl(from var(--c-nrem-sango-5) h s 10% / 5%);
--c-bg-current-line: hsl(from var(--c-dark-5) h calc(s * 3) 5% / 10%);
--c-tx-normal: hsl(from var(--c-Material-amber-600) h s l / 90%);
--c-bg-bottom: #040406;
--c-bg-page-main-lines: #181715;
--c-border-page-main-top: hsl(from var(--c-purple-5) h calc(s * 1.5) calc(l * 0.8));
--border-page-main-top: 8px solid var(--c-border-page-main-top);
--c-bc-card-topline: var(--c-purple-4);
--border-section: calc(0.10rem * var(--h-line-base)) solid hsl(from var(--c-nrem-sango-4) h s l / 15%);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main-alt: hsl(from var(--c-nrem-sango-4) h 65% 35%);
--c-shadow-box-page-main-alt: var(--c-dark-5);
--c-shadow-box-page-main-alt-2: hsl(from var(--c-red-5) h s 50%);
--shadow-box-page-main:
0 0 0.25rem rgb(from var(--c-shadow-box-page-main) r g b / 0.2),
2.8px 2.8px 2.2px hsl(from var(--c-shadow-box-page-main) h s l / 0.02),
6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.028),
12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),
22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),
41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt-2) r g b / 0.05),
100px 100px 80px rgb(from var(--c-shadow-box-page-main-alt-2) r g b / 0.07),
-2.8px 2.8px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.01),
-6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.028),
-12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),
-22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),
-41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt-2) r g b / 0.05),
-100px 100px 80px rgb(from var(--c-shadow-box-page-main-alt-2) r g b / 0.07);
--shadow-box-navbar: none;
--c-bg-navbar: transparent;
--c-bg-navbar-search-form: hsl(from var(--c-dark-6) h s l / 5%);
--c-tx-dropdown-buttom-text: crimson;
& .line:not(.cursor-line) {
--c-tx-normal: hsl(from var(--c-Material-amber-400) h s l / 75%);
}
}
}