nremiel.theme.core.var

#NremのCosenseテーマ軽量版

code:style.css

/* Variants init */

:root,

body {

font-family: var(--sans-serif);

font-variant-ligatures: common-ligatures;

font-size: var(--fs-base);

line-height: var(--h-line-base);

/* --fs-base: calc(15px * 1.1111111); */

--fs-base: 15px;

/* Cosense 既定の line-height: 1.866666667 */

--h-line-base: 1.75;

}

body,

body *:has(.app),

.app,

.app *:not(.char-index) {

--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: "Font Awesome 5 Free", "Font Awesome 5 Brands", "0xProto Nerd Font", "Noto Emoji", "Noto Color Emoji", icon, emoji;

--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: "0xProto Nerd Font", "0xProto", "Zx Proto", "Cascadia Code", "Hack", "Fira Code Retina", "Fira Code", "Fira Code VF", "Andale Mono", "Noto Sans Mono", "DejaVu Sans Mono", "Cascadia Next JP", "IBM Plex Sans JP", "Consolas", "Cousine", "Liberation Mono", monospace, var(--icons), var(--fallback);

--code: "0xProto Nerd Font", "0xProto", "Zx Proto", "Cascadia Code", "Hack", "Fira Code Retina", "Fira Code", "Fira Code VF", "Andale Mono", "Noto Sans Mono", "DejaVu Sans Mono", "Cascadia Next JP", "IBM Plex Sans JP", var(--monospace);

--ipa: "Aptos", "Open Sans", "Roboto Flex", "Noto Sans", "Segoe UI Variable Display", var(--fallback);

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

--blockquote: var(--blockquote-latin), var(--blockquote-ja), sans-serif, var(--icons), var(--fallback);

--italic: var(--italic-latin), var(--italic-ja), italic, var(--icons), var(--fallback);

--italic-bold: "Zilla Slab", "Crete Round", var(--italic);

--cursive: var(--cursive-latin), var(--cursive-ja), cursive, var(--icons), var(--fallback);

--cursive-with-lines: "SAS Liniert", var(--cursive);

--strong: var(--strong-latin), var(--strong-ja), sans-serif, var(--icons), var(--fallback);

--narrow: var(--narrow-latin), var(--narrow-ja), sans-serif, var(--icons), var(--fallback);

--smaller: var(--smaller-latin), var(--smaller-ja), ui-rounded, var(--icons), var(--fallback);

--tiny: var(--tiny-latin), var(--tiny-ja), ui-rounded, var(--icons), var(--fallback);

--ui-sans-serif: -apple-system, BlinkMacSystemFont, var(--ui-sans-serif-latin), var(--ui-sans-serif-ja), ui-sans-serif, var(--icons), var(--fallback);

--text-field: var(--paragraph);

--hash: "Atkinson Hyperlegible Next", "Cascadia Mono", "Cascadia Code", var(--code);

--card-title: var(--narrow), var(--smaller);

--card-description: var(--narrow), var(--smaller);

--h1: var(--h1-latin), var(--h1-ja), var(--sans-serif);

}

body,

body *:has(.app),

.app {

--ff-project-name: "Baskerville", "Cambria", var(--serif-latin), var(--ui-sans-serif);

--ffs-project-name: "ss05";

--fw-project-name: 450;

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

--sans-serif-ja: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", "Yu Gothic", "IBM Plex Sans JP";

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

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

--ffs-monospace: var(--ffs-code);

--ffs-code: "calt", "ss02", "ss03", "ss19", "ss20";

--paragraph-latin: "Atkinson Hyperlegible Next", var(--sans-serif-latin);

--paragraph-ja: -apple-system, BlinkMacSystemFont, "UD Digi Kyokasho NK", "UD Digi Kyokasho NP", "Yu Gothic Medium", var(--sans-serif-ja);

--fw-paragraph: 400;

--ffs-paragraph: '';

--blockquote-latin: var(--paragraph-latin);

--blockquote-ja: "IBM Plex Sans JP", var(--paragraph-ja);

--fw-blockquote: 400;

--ffs-blockquote: '';

--fs-table-block: 14.5px;

--italic-latin: "Zilla Slab", "Lora", "Literata", var(--serif-latin);

--italic-ja: var(--serif-ja);

--ffs-italic: none;

--fw-italic: 500;

--ffs-italic-bold: none;

--fw-italic-bold: 700;

--cursive-latin: "Playwrite AU NSW", "Playwrite DE SAS", "Literata", var(--italic-latin);

--cursive-ja: "BIZ UDGothic", var(--italic-ja);

--strong-latin: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", var(--paragraph-latin);

--strong-ja: "IBM Plex Sans JP Medium", var(--paragraph-ja);

--fw-strong: 600;

--impact: "Anybody", "Rubik", "Bauhaus 93", var(--strong);

--fw-impact: 700;

--trump: "Anybody", "Yu Gothic UI", var(--impact);

--fw-trump: 800;

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

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

--ffs-narrow: 'palt';

--f-stretch-narrow: semi-condensed;

--smaller-latin: "Inter Variable", "Inter", "IBM Plex Sans", "Open Sans", "Roboto Flex", var(--sans-serif-ja);

--smaller-ja: "IBM Plex Sans JP Medium", "IBM Plex Sans JP", "Cascadia Next JP", var(--sans-serif-ja);

--ffs-smaller: 'halt';

--tiny-latin: "Segoe UI Variable Small", "Plus Jakarta Sans Variable", var(--smaller-latin);

--tiny-ja: "BIZ UDGothic", var(--smaller-ja);

--fs-tiny: 12px;

--fw-tiny: 500;

--tt-tiny: uppercase;

--fs-ruby: 0.61666666em;

--fw-ruby: 600;

--ui-sans-serif-latin: "Inter Variable", "Inter", "IBM Plex Sans", var(--smaller-latin);

--ui-sans-serif-ja: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "IBM Plex Sans JP", var(--smaller-ja);

--ffs-ui-sans-serif: 'palt';

--fs-ui-sans-serif: 14px;

--kbd: "Libertinus Keyboard", "Aptos", "Atkinson Hyperlegible Next", "Zilla Slab", var(--code);

--fw-kbd: 700;

--ffs-kbd: '';

--h-line-card: 1.5;

--ffs-card-title: var(--ffs-h1);

--fw-card-title: 550;

--fs-card-title: 16px;

--ta-card-title: start;

--tw-card-title: pretty;

--fs-card-title: var(--fs-ui-sans-serif);

--fs-card-title: var(--fs-card-description);

--fs-card-description: 14.5px;

--fs-card-description: 13px;

--stream-page-status-bar: "Barlow", var(--tiny);

--ffs-stream-page-status-bar: ;

--fw-stream-page-status-bar: var(--fw-status-bar);

--fs-stream-page-status-bar: var(--fs-status-bar);

--h1-latin: "Barlow", "Segoe UI Variable Display", "Aptos Display";

--h1-ja: "Noto Sans JP", "IBM Plex Sans JP", "Yu Gothic";

--h1-ja: "UD Digi Kyokasho NK", "Noto Sans JP", "IBM Plex Sans JP", "Yu Gothic";

--h2: var(--h1);

--h3: var(--h2);

--h4: var(--h3);

--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-h2: 650;

--fw-h3: 650;

--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: uppercase;

--tt-h6: var(--tt-h5);

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

/* 28px */

--fs-h2: calc(1.6 * var(--fs-base));

/* 24px */

--fs-h3: calc(1.333333333 * var(--fs-base));

/* 20px */

--fs-h4: calc(1.133333333 * var(--fs-base));

/* 17.5px */

}

/* */

/* Color palettes */

/* */

/* IDC colors */

:root,

*:has(.app),

.app {

--c-IDC-F165-vv-Y-Jaune-Jonquille: #FDD200;

--c-IDC-F168-lt-Y-Jaune-Narcisse: #F9D64B;

--c-IDC-F197-lt-YG-Narcissus: #ECE130;

}

/* Material Design color palettes */

:root,

*:has(.app),

.app {

--c-Material-yellow-50: #FFFDE7;

--c-Material-yellow-100: #FFF9C4;

--c-Material-yellow-200: #FFF59D;

--c-Material-yellow-300: #FFF176;

--c-Material-yellow-400: #FFEE58;

--c-Material-yellow-500: #FFEB3B;

--c-Material-yellow-600: #FDD835;

--c-Material-yellow-700: #FBC02D;

--c-Material-yellow-800: #F9A825;

--c-Material-yellow-900: #F57F17;

--c-Material-amber-50: #FFF8E1;

--c-Material-amber-100: #FFECB3;

--c-Material-amber-200: #FFE082;

--c-Material-amber-300: #FFD54F;

--c-Material-amber-400: #FFCA28;

--c-Material-amber-500: #FFC107;

--c-Material-amber-600: #FFB300;

--c-Material-amber-700: #FFA000;

--c-Material-amber-800: #FF8F00;

--c-Material-amber-900: #FF6F00;

}

:root,

.app {

/* Blankoj / White */

--c-nrem-osto-1: hsl(60, 33%, 98%);

--c-nrem-osto-1: hsl(60, 20%, 99%);

--c-nrem-osto-2: hsl(0, 0%, 95%);

--c-nrem-osto-3: hsl(0, 0%, 89%);

--c-nrem-osto-4: hsl(0, 0%, 86%);

--c-nrem-osto-5: hsl(0, 0%, 82%);

--c-nrem-osto-6: hsl(0, 0%, 77%);

/* Malheloj / Dark */

--c-nrem-vervo-1: hsl(0, 0%, 0%);

--c-nrem-vervo-2: hsl(0, 0%, 0%);

--c-nrem-vervo-3: #241F31;

--c-nrem-vervo-4: #1c1c1c;

--c-nrem-vervo-5: #181818;

--c-nrem-vervo-6: #090909;

/* --c-bg-bottom && --bg-body */

/* Ruĝoj / Red */

--c-nrem-sango-1: #f7a0a0dd;

--c-nrem-sango-2: #f7a0a0;

--c-nrem-sango-3: #ff5555dd;

--c-nrem-sango-4: #FF5656;

/*hsl(0 100% 67%); */

--c-nrem-sango-4: #ff5555;

--c-nrem-sango-5: crimson;

/* Flavoj / Yellow */

--c-nrem-nervo-1: #F5F7A0DD;

/* hsv(61.379314, 35%, 97% / 87%) ver. 1 */

--c-nrem-nervo-1: #E5E7AFDD;

/* hsv(62.142857, 24%, 91% / 87%) ver. 2 */

--c-nrem-nervo-2: #FCFF55;

--c-nrem-nervo-2: #F0E862DD;

--c-nrem-nervo-3: hsl(from var(--c-IDC-F197-lt-YG-Narcissus) h s l / 85%);

--c-nrem-nervo-4: hsl(from var(--c-IDC-F168-lt-Y-Jaune-Narcisse) h s l / 85%);

--c-nrem-nervo-5: hsl(from var(--c-IDC-F165-vv-Y-Jaune-Jonquille) h s l / 85%);

--c-nrem-nervo-6: #D2A454;

/* Helbluoj / Lightblue */

--c-nrem-larmo-1: #3A96DD;

--c-nrem-larmo-3: #1D66B0;

--c-nrem-larmo-5: #4D1EB0;

--c-nrem-larmo-6: #3B426F;

/* 藏蓝 */

/* Blueta purpuroj */

--c-nrem-magiero-1: green;

--c-nrem-magiero-2: green;

--c-nrem-magiero-3: #3E0082;

--c-nrem-magiero-4: #390355;

--c-nrem-magiero-5: #271031;

--c-nrem-magiero-6: #1d1027;

--c-nrem-magiero-6: #1c1026;

--c-nrem-magiero-7: #181022;

}

/* Yaru color palette */

* {

/* */

/* La Paledo de Yaru */

/* */

--c-bg-button-interagujo-neutral: rgb(13, 118, 29);

--c-blue-1: #75d3f4;

--c-blue-2: #47c4f1;

--c-blue-3: #19B6EE;

--c-blue-4: #007aa6;

--c-blue-5: #335280;

--c-dark-1: #77767B;

--c-dark-2: #5E5C64;

--c-dark-3: #504E55;

--c-dark-4: #3D3846;

--c-dark-5: #241F31;

--c-dark-6: #000000;

--c-libadwaita-dark: #262626;

--c-libadwaita-dark-alt: #303030;

--c-green-1: #5AED70;

--c-green-2: #47D35C;

--c-green-3: #34B948;

--c-green-4: #219E34;

--c-green-5: #0e8420;

--c-light-1: #FFFFFF;

--c-light-2: #FCFCFC;

--c-light-3: #F6F5F4;

--c-light-4: #DEDDDA;

--c-light-5: #C0BFBC;

--c-light-6: #B0AFAC;

--c-light-7: #9A9996;

--c-orange-1: #F29879;

--c-orange-2: #F08763;

--c-orange-3: #ED764D;

--c-orange-4: #EB6536;

--c-orange-5: #E95420;

--c-purple-1: #924D8B;

--c-purple-2: #762572;

--c-purple-3: #77216F;

--c-purple-4: #5E2750;

--c-purple-5: #2C001E;

--c-red-1: #EA485C;

--c-red-2: #DE374C;

--c-red-3: #D3273B;

--c-red-4: #c7162b;

--c-red-5: #a91224;

--c-yellow-1: #FCCD87;

--c-yellow-2: #FBC16A;

--c-yellow-3: #FBB44C;

--c-yellow-4: #FAA82F;

--c-yellow-5: #F99B11;

--c-libadwaita-dark: #262626;

--c-libadwaita-dark-alt: #303030;

}

html,

body,

*:has(.app) {

--c-telomere: hsl(from var(--c-light-4) h s l / 75%);

--c-telomere-unread: var(--c-purple-2);

--c-telomere-updated-after-load: var(--c-green-2);

--c-telomere-updated-after-load-unread: var(--c-red-2);

}

:root,

html,

body,

#app-container {

/* --shadow-box-page-main:

0 0 0.25rem rgba(0, 0, 0, 0.2),

2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),

6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),

12.5px 12.5px 10px rgba(0, 0, 0, 0.035),

22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),

41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),

100px 100px 80px rgba(0, 0, 0, 0.07); */

--shadow-box-page-main:

0 0 0.25rem rgba(0, 0, 0, 0.2),

2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),

6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),

12.5px 12.5px 10px rgba(0, 0, 0, 0.035),

22.3px 22.3px 17.9px rgba(0, 0, 0, 0.021),

41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),

100px 100px 80px rgba(0, 0, 0, 0.035),

-2.8px 2.8px 5.3px rgba(0, 0, 0, 0.01),

-6.7px 6.7px 5.3px rgba(0, 0, 0, 0.014),

-12.5px 12.5px 10px rgba(0, 0, 0, 0.01775),

-22.3px 22.3px 17.9px rgba(0, 0, 0, 0.021),

-41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),

-100px 100px 80px rgba(0, 0, 0, 0.035);

--c-shadow-box-page-main: black;

--c-shadow-box-page-main-alt: black;

--shadow-box-page-main:

0 0 0.25rem hsl(from var(--c-shadow-box-page-main) h s l / 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 hsl(from var(--c-shadow-box-page-main) h s l / 0.028),

-12.5px 12.5px 10px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.035),

-22.3px 22.3px 17.9px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.021),

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 hsl(from var(--c-shadow-box-page-main) h s l / 0.028),

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

22.3px 22.3px 17.9px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.042),

41.8px 41.8px 33.4px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.05),

100px 100px 80px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.035);

--shadow-box-navbar:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

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

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

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

0 0 4px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 0px 6px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 0 6px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 -3px 10px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 8px 16px hsl(from var(--c-ui-accent-color) h s l / 0.24);

--shadow-box-card:

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

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

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

--shadow-box-card:

0 0 0.25rem rgba(0, 0, 0, 0.2),

2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),

6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),

12.5px 12.5px 10px rgba(0, 0, 0, 0.035),

22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),

41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),

100px 100px 80px rgba(0, 0, 0, 0.07);

--shadow-box-slipo:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

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

--shadow-box-slipo:

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

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

--shadow-drop-slipo:

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

--shadow-box-dropdown-menu: var(--shadow-box-slipo);

--shadow-box-inset:

0 0 4px rgba(0, 0, 0, 0.12) inset,

0 0 6px rgba(0, 0, 0, 0.12) inset,

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

--shadow-box-outset:

0 0 4px rgba(100%, 100%, 100%, 0.12),

0 0 6px rgba(100%, 100%, 100%, 0.12),

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

html:not(data-display-style*=window-has-focus) & {

--shadow-box-page-main:

0 0 0.25rem rgba(0, 0, 0, 0.4),

2.8px 2.8px 2.2px rgba(0, 0, 0, 0.04),

6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),

12.5px 12.5px 10px rgba(0, 0, 0, 0.035),

22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),

41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),

100px 100px 80px rgba(0, 0, 0, 0.07),

-2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),

-6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),

-12.5px 12.5px 10px rgba(0, 0, 0, 0.035),

-22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),

-41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05);

--shadow-box-navbar:

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

0 0 4px rgba(0, 0, 0, 0.12),

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

--shadow-box-card:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

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

/* --shadow-box-slipo: 0 0 5px #888; */

--shadow-box-slipo:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

0 0 7px rgba(0, 0, 0, 0.12),

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

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

--shadow-box-slipo:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

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

}