diff --git a/scripts/generate-theme-css.mjs b/scripts/generate-theme-css.mjs index 69f1b35..056eea1 100644 --- a/scripts/generate-theme-css.mjs +++ b/scripts/generate-theme-css.mjs @@ -333,7 +333,8 @@ const generateBackgroundStyles = () => { ...(darkMode ? ["rgba(255, 255, 255, 0.0", "rgb(47, 47, 47)"] : ["rgb(253, 253, 253)", "rgb(15, 15, 15)"]), - ]); + ]), + bgOverlay = darkMode ? "rgba(15, 15, 15, 0.8)" : "rgba(15, 15, 15, 0.6)"; for (const el of document.querySelectorAll( '[style*="background:"], [style*="background-color:"]' )) { @@ -350,6 +351,7 @@ const generateBackgroundStyles = () => { cssRoot += ` --theme--bg-primary: ${defaultPrimary}; --theme--bg-secondary: ${defaultSecondary}; + --theme--overlay-shadow: ${bgOverlay}; `; const mapBgToSelectors = (colorVal) => `.notion-body${modeSelector} [style*="background:${colorVal}"], @@ -360,7 +362,8 @@ const generateBackgroundStyles = () => { ${[...bgPrimary].map(mapBgToSelectors).join(", ")} { background: var(--theme--bg-primary, ${defaultPrimary}) !important; } - .notion-body${modeSelector} .notion-focusable-within [style*="background"], + .notion-body${modeSelector} .notion-focusable-within + [style*="background"]:not([style*="background: none"]), ${[...bgSecondary].map(mapBgToSelectors).join(", ")} { background: var(--theme--bg-secondary, ${defaultSecondary}) !important; } @@ -376,6 +379,10 @@ const generateBackgroundStyles = () => { background-image: linear-gradient(to right, var(--theme--bg-primary, ${defaultPrimary}) 20%, transparent 100%) !important; } + .notion-body${modeSelector} .notion-overlay-container + [data-overlay] > div > [style*="position: absolute"]:first-child { + background: var(--theme--overlay-shadow, ${bgOverlay}) !important; + } `; // hovered elements, inputs and unchecked toggle backgrounds @@ -662,7 +669,8 @@ const generateScrollbarStyles = () => { --theme--scrollbar-thumb: ${scrollbarThumb}; --theme--scrollbar-thumb_hover: ${scrollbarThumbHover};`; cssBody += ` - .notion-body${modeSelector} ::-webkit-scrollbar-track { + .notion-body${modeSelector} ::-webkit-scrollbar-track, + .notion-body${modeSelector} ::-webkit-scrollbar-corner { background: var(--theme--scrollbar-track, ${scrollbarTrack}) !important; } .notion-body${modeSelector} ::-webkit-scrollbar-thumb { diff --git a/src/core/client.css b/src/core/client.css index 630e7dc..9c8a44d 100644 --- a/src/core/client.css +++ b/src/core/client.css @@ -4,6 +4,7 @@ * (https://notion-enhancer.github.io/) under the MIT license */ +@import url("./variables.css"); @import url("./theme.css"); .notion-enhancer--menu-button { @@ -17,7 +18,7 @@ padding: 2px 10px; } .notion-enhancer--menu-button:hover { - background: rgba(255, 255, 255, 0.055); + background: var(--theme--bg-hover); } .notion-enhancer--menu-button > :nth-child(1) { display: flex; @@ -37,6 +38,8 @@ opacity: 0; pointer-events: none; transition: opacity 100ms ease-in; + /* style="display:none" is set to prevent pop-in fouc */ + display: auto !important; } .notion-enhancer--menu-modal[data-open="true"] { pointer-events: auto; @@ -45,7 +48,7 @@ .notion-enhancer--menu-modal > :nth-child(1) { position: fixed; inset: 0; - background: rgba(15, 15, 15, 0.8); + background: var(--theme--bg-overlay); } .notion-enhancer--menu-modal > :nth-child(2) { position: fixed; @@ -58,7 +61,7 @@ pointer-events: none; } .notion-enhancer--menu-modal > :nth-child(2) > iframe { - background: rgb(32, 32, 32); + background: var(--theme--bg-secondary); box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px; border-radius: 5px; diff --git a/src/core/client.mjs b/src/core/client.mjs index 47cbb05..d09e565 100644 --- a/src/core/client.mjs +++ b/src/core/client.mjs @@ -15,8 +15,11 @@ export default async () => { menuButtonIconStyle === "monochrome" ? "?mask" : " text-[16px]" }`; - const modalBackground = html`