diff --git a/packages/core/src/components/taskbar/Taskbar.module.css b/packages/core/src/components/taskbar/Taskbar.module.css index 7a00449..64e2583 100644 --- a/packages/core/src/components/taskbar/Taskbar.module.css +++ b/packages/core/src/components/taskbar/Taskbar.module.css @@ -63,6 +63,10 @@ width: auto; } +button.HomeButton { + padding: 0.625rem; +} + .HomeButton * { fill: var(--foreground-color-0); filter: none; diff --git a/packages/core/src/components/taskbar/app-icon/AppIcon.module.css b/packages/core/src/components/taskbar/app-icon/AppIcon.module.css index 2152ee2..e5938d8 100644 --- a/packages/core/src/components/taskbar/app-icon/AppIcon.module.css +++ b/packages/core/src/components/taskbar/app-icon/AppIcon.module.css @@ -9,6 +9,14 @@ .App-icon svg { filter: var(--svg-drop-shadow-0); + transform: scale(100%); + transform-origin: center; + transition: transform 300ms ease-out 150ms; +} + +.App-icon:not(.Active):hover svg, +.App-icon:not(.Active):focus-visible svg { + transform: scale(115%); } .App-icon.Hidden { diff --git a/packages/core/src/components/taskbar/menus/AppList.module.css b/packages/core/src/components/taskbar/menus/AppList.module.css index 4d38309..9eee0fb 100644 --- a/packages/core/src/components/taskbar/menus/AppList.module.css +++ b/packages/core/src/components/taskbar/menus/AppList.module.css @@ -9,18 +9,21 @@ } .AppButton { + --size: 2rem; + display: flex; - gap: 1rem; + gap: 0.75rem; width: 100%; padding: 0.25rem 0.5rem; + font-size: 0.875rem; border-radius: var(--border-radius-1); } .AppButton > div, .AppButton > div > div, .AppButton > div > div > svg { - width: 2rem; - height: 2rem; + width: var(--size); + height: var(--size); } .AppButton svg { diff --git a/packages/core/src/components/taskbar/menus/HomeMenu.module.css b/packages/core/src/components/taskbar/menus/HomeMenu.module.css index 2acd65f..e8942f2 100644 --- a/packages/core/src/components/taskbar/menus/HomeMenu.module.css +++ b/packages/core/src/components/taskbar/menus/HomeMenu.module.css @@ -4,28 +4,84 @@ } .HomeMenu { + --default-buttons-width: 3rem; + --buttons-count: 5; + min-width: 16rem; max-width: 32rem; + min-height: calc(var(--default-buttons-width) * var(--buttons-count)); border-bottom-left-radius: 0; border-bottom-right-radius: var(--border-radius-1); } .Buttons { + --buttons-width: var(--default-buttons-width); + --padding: 0.25rem; + --filter: blur(0px); + + position: absolute; display: flex; flex-direction: column-reverse; + justify-content: flex-start; align-items: center; - padding: 0.25rem; + bottom: 0; + left: 0; + padding: var(--padding); margin-top: auto; + width: var(--buttons-width); + height: 100%; + border-radius: var(--border-radius-1); + overflow: hidden; + transition: width 200ms ease-out 200ms; z-index: 1; } +.Buttons::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: inherit; + pointer-events: none; + backdrop-filter: var(--filter); + transition: backdrop-filter 200ms ease-out 200ms; +} + +.Buttons:hover, +.Buttons:focus-visible { + --buttons-width: 10rem; + --filter: var(--taskbar-filter); +} + .Buttons > button { + --button-width: calc(var(--buttons-width) - var(--padding) * 2); + --button-height: calc(var(--default-buttons-width) - var(--padding) * 2); + + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; padding: 0.5rem; + width: var(--button-width); + height: var(--button-height); border-radius: var(--border-radius-1); + overflow: hidden; + transition: inherit; + z-index: 1; } .Buttons > button > svg { height: 1.5rem; + width: 1.5rem; +} + +.Buttons > button > p { + position: absolute; + left: calc(var(--default-buttons-width) - var(--padding) * 2); + margin: 0; + white-space: nowrap; } .Apps { @@ -33,15 +89,44 @@ flex-direction: column; width: 100% !important; max-height: 20rem; - padding: 1rem; + padding: 0.5rem; padding-right: 0.25rem; padding-bottom: 0; + margin-left: var(--default-buttons-width); } -.Apps > h1 { +.Logo { + display: flex; + gap: 0.5rem; + width: auto; + margin-bottom: 0.5rem; + justify-content: flex-start; + align-items: center; + user-select: none; +} + +.Logo div, +.Logo svg { + width: auto; + height: 2.25rem; + color: inherit; + aspect-ratio: 1; +} + +.Logo svg { + object-fit: contain; +} + +.Logo svg * { + color: inherit; + fill: currentColor; +} + +.Logo > h1 { width: 100%; text-align: left; - font-size: 1rem; margin: 0; - margin-bottom: 0.5rem; + font-size: 1rem; + font-weight: 600; + letter-spacing: normal; } \ No newline at end of file diff --git a/packages/core/src/components/taskbar/menus/HomeMenu.tsx b/packages/core/src/components/taskbar/menus/HomeMenu.tsx index 8ab5d1d..44ee342 100644 --- a/packages/core/src/components/taskbar/menus/HomeMenu.tsx +++ b/packages/core/src/components/taskbar/menus/HomeMenu.tsx @@ -60,16 +60,18 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
- - - - -
-

{systemName}

+ + +

{systemName}

+
{appsConfig.apps.sort((a, b) => a.name.localeCompare(b.name)).map(({ name, id, iconUrl }) =>