Aureolo Light

https://scrapbox.io/api/pages/nrem-confIgs/Aureolo/icon#.png

UserCSS.icon

依存先:

code:style.css

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

@import url('../Aureolo:appearance/import.css');

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

@import url('../Aureolo:appearance/base.css');

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

@import url('../Aureolo:appearance/var.css');

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

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

@import url('../Aureolo:appearance/etc.css');

:root {

color-scheme: light;

}

code:var.css

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

/* --brand-color: hsl(from var(--navbar-bg, midnightblue) h 31% 44% / 1); */

--brand-color: oklch(from var(--navbar-bg, midnightblue) l c h / 1);

/* --interactive-color: hsl(from 0 100% 67%); */

--interactive-color: var(--c-red-1, crimson);

--unread-color: hsl(from var(--brand-color) h 31% 44%);;

--cursor-color: hsl(from var(--interactive-color, crimson) h 80% 43%);

/* --user-flag-bg: hsl(from var(--interactive-color, crimson) h 90% 15%); */

--user-flag-bg: hsl(from var(--interactive-color, crimson) h 100% 25%);

--user-flag-name-color: white;

--text-selection-bg: hsl(from var(--interactive-color, crimson) h 79% 60%);

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

--navbar-bg: hsl(from midnightblue h 57% 30% / 0%);

/* --navbar-title-color: hsl(from var(--brand-color, midnightblue) h 57% 30%); */

/* --navbar-title-color: oklch(from var(--brand-color, midnightblue) 40% c h); */

--navbar-title-color: var(--brand-color, midnightblue);

--edit-mode-navbar-title-color: hsl(from var(--interactive-color) h 69% 49%);

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

--navbar-icon-color: var(--navbar-title-color);

--new-button-bg: hsl(from var(--search-form-bg) h s l / .5);

/* --search-form-bg: hsl(from var(--brand-color) h s 44% / .25); */

--search-form-bg: oklch(from var(--brand-color) 56% c h / .25);

--edit-mode-search-form-bg: hsl(from var(--brand-color) h 25% 47% / .15);

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

--search-form-text-color: hsl(from var(--brand-color) h calc(s * .8) 25% / .85);

--search-form-icon-color: white;

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

--search-form-focus-box-shadow-color: oklch(from var(--brand-color, midnightblue) 56% c h);

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

--page-menu-bg: hsl(from var(--navbar-bg) h s 97% / .5);

--edit-mode-page-menu-opacity: .65;

--expandable-menu-bg: var(--page-menu-bg, var(--search-form-bg));

--expandable-menu-toggle-button-color: var(--navbar-title-color);

--edit-mode-expandable-menu-bg: hsl(from var(--interactive-color, crimson) h s 97% / .5);

--edit-mode-expandable-menu-tool-button-color: var(--edit-mode-navbar-title-color);

--dropdown-menu-bg: var(--page-bg);

--dropdown-menu-item-color: var(--page-text-color);

--dropdown-menu-item-hover-color: var(--code-color);

--dropdown-menu-item-hover-bg: var(--code-bg);

--dropdown-menu-divider: var(--code-bg);

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

--statusbar-page-title-color: white;

--statusbar-page-list-status-bg: oklch(from var(--brand-color) 40% c h / 85%);

--statusbar-page-list-status-label-color: white;

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

--statusbar-error-label-color: midnightblue;

--telomere-unread: hsl(from var(--brand-color, var(--c-purple-1, green)) h 65% 44% / 85%);

/* --telomere-updated-after-load-unread: hsl(from 356 79% 60%) / 85%); */

/* --telomere-updated-after-load-unread: hsl(from var(--interactive-color) h 98% 45% / 85%); */

--telomere-updated: hsl(from var(--interactive-color, crimson) h 100% 65% / 85%);

--line-permalink-color: hsl(from var(--interactive-color) h 79% 60% / 10%);

/* --line-permalink-activated-init-bg: hsl(356 98% 45%); */

--line-permalink-activated-init-bg: hsl(355 100% 42%);

--line-permalink-activated-animation-duration: 0.85s;

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

/* --page-bg: hsl(42 20% 98%); */

/* --page-bg: hsl(from var(--brand-color) h 20% 98%); */

--page-text-color: hsl(257 15% 31%);

--page-text-color: hsl(257 15% 34%);

--line-not-cursor-line-opacity: .65; /* 0.65 はガンマ補正込みで 0.8 相当 */

--cursor-line-bg: oklch(from var(--page-bg) 100% c h);

--cursor-line-margin-bg: var(--line-permalink-color);

--line-title-color: var(--page-text-color);

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

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

--empty-page-link-hover-color: darkred;

--hashtag-color: forestgreen;

--hashtag-hover-color: darkgreen;

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

--indent-mark-color: hsl(from var(--page-text-color) h s l / .65);

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

--quote-bg-color: color-mix(in hsl, hsl(223 50% 50%) 5%, hsl(from var(--page-bg) 223 s l));

--quote-text-color: hsl(from var(--page-text-color) h calc(s * 4/3) calc(l * 1.15));

--quote-text-color: hsl(from var(--page-text-color) h calc(s * 7/3) calc(l * 0.9));

/* --quote-border-color: oklch(from var(--quote-bg-color) 74% c h / 1); */

--quote-border-color: hsl(216 15% 74%);

--quote-border-width: 2.5px;

--quote-padding-start: max(3px, (var(--indent-width, 1.5em) - var(--quote-border-width, 1px) ));

--quote-font-family: var(--paragraph-latin), "Yu Gothic Medium", var(--paragraph-ja), var(--fallback), var(--icons);

--quote-font-feature-settings: ;

--quote-font-weight: 400;

--page-border: none;

/* --page-border-top-width: var(--page-layout-unit, 7px);

--page-border-top-color: hsl(from var(--navbar-bg) h 5% 89%);

--page-border-top: var(--page-border-top-width, 7px) solid var(--page-border-top-color); */

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

--page-box-shadow-color-primary: color-mix(in oklch, oklch(from var(--brand-color) 50% c h) 50%, oklch(from midnightblue l c h));

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

/* --page-box-shadow-color-secondary: hsl(from var(--brand-color, midnightblue) h 57% 30%); */

/* --page-box-shadow-color-secondary: hsl(from var(--brand-color, midnightblue) h 78% 44%); */

--page-box-shadow-color-secondary: hsl(from var(--brand-color, midnightblue) h s l);

--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-primary) 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-block-start-bg: hsl(0 0 15%);

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

--code-helpfeel-bg: hsl(from var(--c-red-5) h s l / .85);

--code-helpfeel-prefix-color: hsl(0 100% 100% / .7);

--code-helpfeel-entry-color: hsl(0 100% 100%);

--card-bg: color-mix(in oklab, var(--page-bg) 80%, var(--body-bg));

--card-focused-bg: color-mix(in hsl, var(--page-bg) 95%, var(--body-bg));

--card-hover-bg: transparent;

--card-title-bg: transparent;

--card-title-color: hsl(from var(--page-text-color) h 2% 27%);

--card-title-hover-color: var(--page-text-color);

--card-icon-filter: opacity(.85);

--card-icon-focused-filter: opacity(1);

--card-pin-overhang-color: transparent;

--card-unread-border: 4px solid var(--telomere-unread, transparent);

--card-unread-border-default: 2px solid transparent;

--card-border: 2px solid var(--page-menu-bg, transparent);

/* --card-hover-border: 2px solid hsl(from var(--brand-color, transparent) h s 44% / .55); */

--card-hover-border: 2px solid hsl(from var(--page-box-shadow-color-primary, transparent) h s l / .4);

/* --card-box-shadow-color: black; */

--card-box-shadow-color: var(--page-box-shadow-color-primary);

--card-box-shadow-color: hsl(from var(--page-bg) h 20% 2.5%);

--card-box-shadow-color: oklch(from var(--page-bg) 15% 20% h);

--card-box-shadow:

-4px -6.7px 5.3px hsl(from var(--card-box-shadow-color) h s l / 0.04),

4px 6.7px 5.3px hsl(from var(--card-box-shadow-color) h s l / 0.04),

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

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

-12.3px 22.3px 17.9px hsl(from var(--card-box-shadow-color) h s l / 0.051),

12.3px 22.3px 17.9px hsl(from var(--card-box-shadow-color) h s l / 0.051);

--card-box-hover-shadow-init-color: var(--page-box-shadow-color-primary);

--card-box-hover-shadow-init:

0 0 6px hsl(from var(--card-box-shadow-init-color) h s l / 0.22),

0 0 0.25em hsl(from var(--card-box-shadow-init-color) h s l / 0.2),

2.8px 2.8px 2.2px hsl(from var(--card-box-shadow-init-color) h s l / 0.02),

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

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

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

41.8px 41.8px 33.4px hsl(from var(--card-box-shadow-init-color) h s l / 0.05);

/* --card-box-hover-shadow-color: hsl(from var(--brand-color) h calc(s * 1.5) l); */

/* --card-box-hover-shadow-color: hsl(from var(--brand-color) h s 44%); */

/* --card-box-hover-shadow-color: hsl(from var(--brand-color) h s l); */

--card-box-hover-shadow-color: var(--page-box-shadow-color-primary);

--card-box-hover-shadow:

0 0 4px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 0px 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 0 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 8px 16px hsl(from var(--card-box-hover-shadow-color) h s l / 0.24),

0 0 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 0 0.25em hsl(from var(--card-box-hover-shadow-color) h s l / 0.2),

2.8px 2.8px 2.2px hsl(from var(--card-box-hover-shadow-color) h s l / 0.02),

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

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

22.3px 22.3px 17.9px hsl(from var(--card-box-hover-shadow-color) h s l / 0.04);

/* --card-box-hover-shadow-color: oklch(from var(--page-box-shadow-color-secondary) l calc(c * 1.5) h); */

--card-box-hover-shadow-color: var(--page-box-shadow-color-secondary);

--card-box-hover-shadow:

0 0 4px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 0px 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 0 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 8px 16px hsl(from var(--card-box-hover-shadow-color) h s l / 0.24),

0 0 6px hsl(from var(--card-box-hover-shadow-color) h s l / 0.22),

0 0 0.25em hsl(from var(--card-box-hover-shadow-color) h s l / 0.2),

2.8px 2.8px 2.2px hsl(from var(--card-box-hover-shadow-color) h s l / 0.02),

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

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

22.3px 22.3px 17.9px hsl(from var(--card-box-hover-shadow-color) h s l / 0.042);

--card-icon-hover-animation-duration: 0.15s;

--relation-label-links-bg: hsl(from var(--navbar-bg) h s 100% / 100%); /* 1 hop links */

--relation-label-bg: white;

--relation-label-hover-bg: white;

--relation-label-text: var(--hashtag-color);

--relation-label-hover-text: var(--hashtag-color);

--relation-label-border: 2px solid transparent;

--relation-label-hover-border: 2px solid hsl(from var(--hashtag-color, transparent) h s 55%);

--relation-label-box-shadow: none;

--relation-label-box-hover-shadow-color: var(--hashtag-color);

--relation-label-box-hover-shadow:

0 0 4px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),

0 0px 6px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),

0 0 6px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),

0 8px 16px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.24),

0 0 6px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.22),

0 0 0.25em hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.2),

2.8px 2.8px 2.2px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.02),

6.7px 6.7px 5.3px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.028),

12.5px 12.5px 10px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.035),

22.3px 22.3px 17.9px hsl(from var(--relation-label-box-hover-shadow-color) h s l / 0.042);

--relation-label-2hop-hover-animation-duration: 0.2s;

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

--empty-card-opacity: .75;

--stream-section-label-bg: var(--brand-color, purple);

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

--line-title-font-weight: 550;

--line-title-latin: "Zilla Slab", "EB Garamond", "Source Sans Pro", "Roboto Serif", -apple-system, "Segoe UI Variable Display", "Atkinson Hyperlegible Next", "Roboto Flex", "Roboto", "Helvetica", "Arimo";

}

body { background-color: oklch(from var(--body-bg) 90% c h); }

code:var.css

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

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

}

}

html {

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

/* --inline-quote-border-width: 2.25px; */

--inline-quote-border-width: 2px;

}

code:import.css

@import url("/api/code/nrem-configs/Atkinson_Hyperlegible_Next/style.css");

@import url("/api/code/nrem-configs/Inter/style.css");

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

}

code:import.css

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