Aŭreolo Auto-colorize Simplified

from Aŭreolo Simplified

code:style.css

html:not(data-project-theme=default) {

--body-bg-copy: var(--body-bg);

--navbar-bg-copy: var(--navbar-bg);

--search-form-bg-copy: var(--search-form-bg);

& body {

--navbar-bg: hsl(from var(--navbar-bg-copy) h s l / 0%);

--accent-color: hsl(from var(--navbar-bg, deeppink) h s l / 100%);

--body-bg: hsl(from var(--body-bg-copy) h s 85%);

--body-bg: hsl(from var(--body-bg-copy) h 12% 90%);

--navbar-title-color: hsl(from var(--accent-color) h 65% 20% / 100%);

--search-form-bg: hsl(from var(--search-form-bg-copy) h 35% 65% / 35%);

--search-form-bg: hsl(from var(--search-form-bg-copy) h 35% 47% / 25%);

&:has(.cursor-line) {

--search-form-bg: hsl(from var(--search-form-bg-copy) h 20% 47% / 10%);

--search-form-bg: hsl(from var(--accent-color) h 25% 47% / 10%);

}

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

--search-form-focus-box-shadow-color: var(--accent-color);

--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-manu-button-bg: hsl(from var(--accent-color) h s 97% / 50%);

--text-selection-bg: var(--accent-color);

--telomere-unread: hsl(from var(--accent-color, deeppink) h 65% 44% / 80%);

--page-border-top: 8px solid hsl(from var(--accent-color) h 20% 90%);

--page-box-shadow-color-primary: hsl(from var(--body-bg-copy) h s 50%);

--page-box-shadow-color-secondary: var(--accent-color);

--card-backside-color: var(--accent-color);

--statusbar-page-title-bg: hsl(from var(--accent-color) h s l / 85%);

/* var(--c-purple-1); */

/* --navbar-title-color: var(--new-button-bg); */

/* --c-bg-navbar: hsl(from var(--navbar-bg) h s l / 85%); */

--navbar-title-color: hsl(from var(--accent-color) h 65% 20%);

--navbar-title-color: hsl(from var(--accent-color) h 100% 10%);

--stream-section-title-bg: hsl(from var(--accent-color) h s l / 85%);

--shadow-box-popup-menu:

0 0 0.375rem hsl(from var(--c-red-5) / 0.125),

0 0 0.25rem hsl(from var(--c-red-3) / 0.15);

--statusbar-page-list-status-bg: var(--accent-color);

}

code:style.css

htmldata-project-theme=paper-dark,

htmldata-project-theme=hacker1,

htmldata-project-theme=hacker2,

htmldata-project-theme=summer,

htmldata-project-theme=spring,

htmldata-project-theme=autumn,

htmldata-project-theme=tropical {}

htmldata-project-theme=green {

--navbar-bg-copy: var(--c-green-5);

--search-form-bg-copy: var(--navbar-bg-copy);

--body-bg-copy: var(--c-green-3);

--page-box-shadow-color-tertiary: midnightblue;

& body {

--body-bg: hsl(from var(--body-bg-copy) h 12% 90%);

--body-bg: hsl(223, 12%, 90%);

}

--page-border-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);

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

--page-box-shadow-color-primary: deeppink;

--page-box-shadow-color-primary: var(--body-bg);

--page-box-shadow-color-secondary: var(--navbar-bg);

--navbar-search-form-focus-box-shadow-color: var(--navbar-bg);

--stream-section-title-bg: hsl(from var(--accent-color) h s l / 85%);

--c-bg-text-selection: var(--c-green-3);

--shadow-box-popup-menu: 0 0 0.375rem hsl(from var(--c-green-5) / 0.125), 0 0 0.25rem hsl(from var(--c-green-3) / 0.15);

--c-bg-statusbar-page-title: var(--c-green-1);

--c-bg-statusbar-page-list-status: var(--c-green-1);

--c-bg-statusbar-page-title: var(--c-green-4);

--c-bg-statusbar-page-list-status: var(--c-green-4);

--c-tx-h1: hsl(from var(--navbar-bg) h s 1);

}

htmldata-project-theme=kyoto,

htmldata-project-theme=newyork,

htmldata-project-theme=paris,

htmldata-project-theme=mred,

htmldata-project-theme=lgreen {

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

/* --c-bg-navbar: hsl(from var(--navbar-bg) h s l / 85%); */

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

--navbar-title-color: hsl(from var(--navbar-bg) h 65% 20%);

--navbar-title-color: hsl(from var(--navbar-bg) h 100% 10%);

/* --navbar-title-color: var(--new-button-bg); */

--c-bg-statusbar-page-title: var(--c-purple-1);

--c-bg-statusbar-page-list-status: var(--c-purple-1);

--c-tx-h1: hsl(from var(--navbar-bg) h s 1);

}

/* Stationary */

htmldata-project-theme=blue {

--c-ui-accent-color: var(--c-red-5);

--c-ui-accent-color-selectable: var(--c-red-3);

--c-bg-text-selection: var(--card-description-color);

--c-bg-bottom: hsl(223, 12%, 90%);

--c-fg-card-backside: var(--c-red-5);

--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);

--c-shadow-box-page-main: hsl(from midnightblue h s 50%);

--c-shadow-box-page-main: var(--body-bg);

--c-shadow-box-page-main-alt: var(--navbar-bg);

--c-telomere-unread: var(--navbar-bg);

/* --c-bg-navbar: hsl(from var(--navbar-bg) h s l / 85%); */

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

--navbar-title-color: hsl(from var(--navbar-bg) h 65% 20%);

--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);

--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);

--shadow-box-popup-menu: 0 0 0.375rem hsl(from var(--c-red-5) / 0.125),

0 0 0.25rem hsl(from var(--c-red-3) / 0.15);

--c-bg-statusbar-page-title: var(--c-red-1);

--c-bg-statusbar-page-list-status: var(--c-red-1);

--c-tx-h1: hsl(from var(--navbar-bg) h s 1);

}

htmldata-project-theme=purple {

--c-ui-accent-color: var(--c-purple-5);

--c-ui-accent-color-selectable: var(--c-purple-3);

--c-bg-text-selection: var(--c-purple-1);

--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);

--c-bg-bottom: hsl(from var(--body-bg) h s 85%);

--c-bg-bottom: hsl(25, 12%, 90%);

--c-bg-bottom: hsl(223, 12%, 90%);

--c-bg-bottom: hsl(from var(--navbar-bg) h 12% 90%);

--page-border-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);

--page-box-shadow-color-primary: var(--body-bg);

--page-box-shadow-color-primary: hsl(from var(--navbar-bg) h s 50%);

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

--c-fg-card-backside: var(--c-red-5);

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

--navbar-title-color: hsl(from var(--navbar-bg) h 65% 20%);

--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);

--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);

--shadow-box-popup-menu: 0 0 0.375rem hsl(from var(--c-red-5) / 0.125),

0 0 0.25rem hsl(from var(--c-red-3) / 0.15);

--c-bg-statusbar-page-title: var(--c-purple-1);

--c-bg-statusbar-page-list-status: var(--c-purple-1);

--c-tx-h1: hsl(from var(--navbar-bg) h s 1);

&:has(.page-status.error) {

--c-shadow-box-page-main: hsl(from deeppink h s 50%);

--c-shadow-box-page-main-alt: var(--c-purple-3);

}

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

--c-shadow-box-page-main: hsl(from deeppink h s 50%);

--c-shadow-box-page-main-alt: var(--c-purple-3);

--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 rgb(from var(--c-shadow-box-page-main) r g b / 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.035),

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

}

htmldata-project-theme=orange {

--c-ui-accent-color: var(--c-red-5);

--c-ui-accent-color-selectable: var(--c-red-3);

--c-bg-text-selection: var(--card-description-color);

--c-bg-bottom: var(--body-bg);

--c-bg-bottom: hsl(from var(--body-bg) h 12% 90%);

--c-bg-bottom: hsl(from var(--body-bg) h s 85%);

--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);

--c-bg-bottom: hsl(36, 12%, 90%);

--c-fg-card-backside: var(--c-red-5);

--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);

--c-shadow-box-page-main: hsl(from midnightblue h s 50%);

--c-shadow-box-page-main: var(--body-bg);

--c-shadow-box-page-main-alt: var(--navbar-bg);

--c-telomere-unread: var(--navbar-bg);

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

--navbar-title-color: hsl(from var(--navbar-bg) h 65% 20%);

--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);

--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);

--shadow-box-popup-menu: 0 0 0.375rem hsl(from var(--c-red-5) / 0.125),

0 0 0.25rem hsl(from var(--c-red-3) / 0.15);

--c-bg-statusbar-page-title: var(--c-yellow-1);

--c-tx-statusbar-page-title: black;

--c-bg-statusbar-page-list-status: var(--c-yellow-4);

--c-tx-h1: hsl(from var(--navbar-bg) h s 1);

}

htmldata-project-theme=red {

--navbar-bg-copy: var(--c-red-5);

--navbar-bg-copy: var(--c-red-3);

--text-selection-bg: var(--c-orange-2);

--body-bg-copy: hsl(36, 12%, 90%);

--page-bg-copy: hsl(0, 12%, 90%);

--card-backside-bg: var(--c-red-5);

--page-box-shadow-primary: hsl(from var(--c-nrem-sango-5) h s 50%);

--page-box-shadow-secondary: var(--c-red-3);

--telomere-unread: var(--c-red-1);

--navbar-title-color: var(--c-red-3);

--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);

--shadow-box-popup-menu: 0 0 0.375rem hsl(from var(--c-red-5) / 0.125),

0 0 0.25rem hsl(from var(--c-red-3) / 0.15);

--c-bg-statusbar-page-title: var(--c-red-1);

--c-bg-statusbar-page-list-status: var(--c-red-1);

}

/* ページ背景が暗色のテーマ */

htmldata-project-theme=default-dark,

htmldata-project-theme=paper-dark-dark {

& body {

--page-bg: ;

}