Design Refresh

[Shomnipotence]

https://www.figma.com/design/PqKdpNK8MLsskXQJvwuN0z/UI?node-id=120-9821&t=QTS0NJ9eKCtA8Xzf-1

Main frame - title bar (tab bar), address bar (toolbar)

• Main frame - title bar (tab bar), address bar (toolbar)
  Customize the tab highlighting style. Do not use the original WinUI3 tab style. For specific styles, see the design drawing
  A rounded rectangle with a height of 30px, a radius of 3px, and an outer stroke of 1px. For more details, see the figma file
  

The tab bar area is 48px high

Removes the address bar background and only shows it on hover and activation for a unified look.The height is also 48, and the top margin is -8

When the address bar is activated, an underline effect appears. This effect can be achieved by modifying the WinUI3 stroke gradient

The title bar color is extended from the top color

• The title bar color is extended from the top color of the page to achieve an edge-to-edge design. You can use an in-app acrylic effect (tinted), or solid.

Enable or disable toolbar bottom separator line

• Generally speaking, the design guidelines stipulate that the content area should be lighter than the title bar (toolbar) area, and there should be a dividing line.

My design here removes this effect. You can add it, or allow users to choose freely.

New tab page

• Brand new new tab page,
  The design of the new tab page uses a collection of frequently visited URLs/or user-specified bookmark folders
  The tab background follows the user settings (acrylic/mica), and cannot be set to a picture
  

Error page

• background of its
  follows the user settings (acrylic/mica), and cannot be set to a picture
  

Thumbnail of Tab

• In the tab thumbnail, the background material follows the user setting. If it is acrylic, acrylic is used; if it is mica, mica is used.
  

Add to Bookmark Dialog

• This is a pop-up window with an acrylic background and a drop-down button to expand more content.
  

• After expansion, it contains search and new folder functions
  

Bookmark

• background of its follows the user settings (acrylic/mica), and cannot be set to a picture
  Bookmarks has three views:
• Show name only
• Show thumbnail and name
• Grid View
  
  
  

History

• background of its follows the user settings (acrylic/mica), and cannot be set to a picture
  History Page has three views:
• Show name only
• Show thumbnail and name
• Grid View

Plugin Flyout

• Disable the plugin menu background and use acrylic instead, this will avoid the ugly black/white background that sticks out