From 0fdd7ad632ff963420840cb4f659f59741170d56 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Wed, 5 Jun 2024 15:16:08 +0200 Subject: [PATCH] Fixed taskbar blur --- .../directory-list/DirectoryList.module.css | 2 +- src/components/taskbar/Taskbar.module.css | 74 ++++++++++++++++++- .../taskbar/menus/HomeMenu.module.css | 38 +--------- src/components/taskbar/menus/HomeMenu.tsx | 7 +- .../taskbar/menus/SearchMenu.module.css | 6 +- .../taskbar/menus/UtilMenu.module.css | 6 +- src/hooks/themes/themes.tsx | 4 +- 7 files changed, 87 insertions(+), 50 deletions(-) diff --git a/src/components/apps/file-explorer/directory-list/DirectoryList.module.css b/src/components/apps/file-explorer/directory-list/DirectoryList.module.css index 1fbd83a..612e2a6 100644 --- a/src/components/apps/file-explorer/directory-list/DirectoryList.module.css +++ b/src/components/apps/file-explorer/directory-list/DirectoryList.module.css @@ -65,6 +65,6 @@ opacity: 25%; position: absolute; border-radius: var(--border-radius-0); - background-color: var(--blue-b); + background-color: var(--blue-1); border: 0.25rem solid var(--blue-0); } \ No newline at end of file diff --git a/src/components/taskbar/Taskbar.module.css b/src/components/taskbar/Taskbar.module.css index 5924442..faefe96 100644 --- a/src/components/taskbar/Taskbar.module.css +++ b/src/components/taskbar/Taskbar.module.css @@ -7,21 +7,30 @@ left: 0; width: 100%; height: var(--taskbar-height); - backdrop-filter: var(--taskbar-filter); } -.Taskbar::after { - opacity: var(--taskbar-opacity); +.Taskbar::after, +.Taskbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; + pointer-events: none; +} + +.Taskbar::after { + opacity: var(--taskbar-opacity); background-color: var(--taskbar-color); z-index: -2; } +.Taskbar::before { + backdrop-filter: var(--taskbar-filter); + z-index: -3; +} + .Taskbar button { display: flex; align-items: center; @@ -138,4 +147,63 @@ width: 0.5rem; padding: 0; margin-left: 1rem; +} + +.Menu-outer { + position: absolute; + right: 0; + bottom: 100%; + height: auto !important; + overflow: hidden; +} + +.Menu-outer:not(.Active) { + pointer-events: none; +} + +.Menu-inner { + opacity: 1; + display: flex; + border-top-left-radius: var(--border-radius-1); + border-top-right-radius: var(--border-radius-1); + border-bottom-left-radius: var(--border-radius-1); + transform: none; + transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; + overflow: hidden; + resize: horizontal; +} + +.Menu-outer:not(.Active) .Menu-inner { + opacity: 0; + transform: translateY(100px); +} + +.Menu-inner::after, +.Menu-outer::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: inherit; + pointer-events: none; +} + +.Menu-inner::after { + opacity: var(--taskbar-menu-opacity); + background-color: var(--taskbar-menu-color); + z-index: -2; +} + +.Menu-outer::after { + opacity: 1; + transition: opacity 200ms ease-in-out, top 200ms ease-in-out; + backdrop-filter: var(--taskbar-filter); + z-index: -3; +} + +.Menu-outer:not(.Active)::after { + opacity: 0; + top: 100px; } \ No newline at end of file diff --git a/src/components/taskbar/menus/HomeMenu.module.css b/src/components/taskbar/menus/HomeMenu.module.css index b2d468f..7ea28b7 100644 --- a/src/components/taskbar/menus/HomeMenu.module.css +++ b/src/components/taskbar/menus/HomeMenu.module.css @@ -1,45 +1,13 @@ .Container-outer { - position: absolute; + right: unset; left: 0; - bottom: 100%; - height: auto !important; - overflow: hidden; } .Container-inner { - opacity: 1; - display: flex; min-width: 16rem; max-width: 32rem; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; - backdrop-filter: var(--taskbar-filter); - transform: none; - transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; - overflow: hidden; - resize: horizontal; -} - -.Container-inner::after { - opacity: var(--taskbar-menu-opacity); - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: var(--taskbar-menu-color); - z-index: -2; -} - -.Container-outer:not(.Active) { - pointer-events: none; -} - -.Container-outer:not(.Active) .Container-inner { - opacity: 0; - transform: translateY(100px); + border-bottom-left-radius: 0; + border-bottom-right-radius: var(--border-radius-1); } .Buttons { diff --git a/src/components/taskbar/menus/HomeMenu.tsx b/src/components/taskbar/menus/HomeMenu.tsx index 7f5f34b..a2de245 100644 --- a/src/components/taskbar/menus/HomeMenu.tsx +++ b/src/components/taskbar/menus/HomeMenu.tsx @@ -1,6 +1,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import styles from "./HomeMenu.module.css"; import appStyles from "./AppList.module.css"; +import taskbarStyles from "../Taskbar.module.css"; import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons"; import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext"; import AppsManager from "../../../features/apps/appsManager"; @@ -29,9 +30,9 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) { setTabIndex(active ? 0 : -1); }, [active]); - const classNames = [styles["Container-outer"]]; + const classNames = [styles["Container-outer"], taskbarStyles["Menu-outer"]]; if (active) - classNames.push(styles.Active); + classNames.push(taskbarStyles.Active); let onlyAltKey = false; const onKeyDown = (event: KeyboardEvent) => { @@ -61,7 +62,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) { return (
-
+