Open danirabbit opened 1 month ago
I propose adding a light background color with 10% opacity and a backdrop filter with a 9px blur effect. This enhances visibility and maintains the aesthetic blending of shell elements with the desktop.
dock {
background: rgba(255, 255, 255, 0.1); /* 👈 Light background with 10% opacity */
border-radius: 9px;
box-shadow:
inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
inset 1px 0 0 0 rgba(255, 255, 255, 0.035),
inset -1px 0 0 0 rgba(255, 255, 255, 0.035),
0 0 0 1px rgba(0, 0, 0, 0.4),
0 1px 3px rgba(0, 0, 0, 0.1),
0 3px 9px rgba(0, 0, 0, 0.15);
margin: 9px;
margin-top: 0;
backdrop-filter: blur(9px); /* 👈 Blur effect */
}
To demonstrate the effectiveness of this solution, I have created four mockups showcasing the Dock over different backgrounds and text:
These mockups show that the Dock is now clearly visible and provides sufficient contrast against various backgrounds.
I'd love to hear your feedback or comments!
Problem
Shell elements are transparent or semi-transparent so that they blend into the desktop itself, but this sometimes creates issues with contrast: https://github.com/elementary/dock/issues/259
Proposal
A way to blur behind the Dock and Panel (when it has a background)
Prior Art (Optional)
Windows:![b8AefxSmxXELW9BKkNo6vW-3702192291](https://github.com/user-attachments/assets/f3686815-8293-4e50-a1b0-ee5426016d0d)
macOS:![macos-sequoia-recopie-iphone-3938195366](https://github.com/user-attachments/assets/d9aaf036-b854-45bf-b350-42674dc50616)
Chrome OS:![MeetChromeOS_Intro](https://github.com/user-attachments/assets/5e1675eb-05c8-44b5-b0d5-72d45908e0c5)