[create-theme]: Modern UI

[Korvexx]

Name

Modern UI

Description

Modern UI enhances various parts of the browsers UI. Made by Korvexx with Love!

Homepage

https://github.com/Korvexx/Modern-UI/

Image

https://github.com/Korvexx/Modern-UI/blob/main/Thumbnail.png?raw=true

Type

• JSON Color Theme

Theme Styles

#urlbar .urlbar-input {
    text-align: center !important;
}

.identity-box-button {
    background-color: transparent !important;
}


.titlebar-buttonbox {
    margin-left: 10px !important;
    margin-right: 15px !important;
}

.titlebar-button {
    padding: 0px !important;
    min-height: 15px !important;
    min-width: 15px !important;
    align-self: center;
    margin-left: 7.5px !important;
    border-radius: 50px;
    transition: transform 150ms ease, background-color 150ms ease !important;
}

.titlebar-button {
    background-color: var(--zen-colors-border) !important;
}

.titlebar-min:hover {
    background-color: hsl(120, 60%, 50%) !important;
}

.titlebar-max:hover,
.titlebar-restore:hover {
    background-color: hsl(50, 100%, 50%) !important;
}

.titlebar-close:hover {
    background-color: hsl(0, 80%, 50%) !important;
}

.titlebar-button:hover {
    transform: scale(1.15) !important;
}

.titlebar-button>image {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out !important;
}

.titlebar-button:hover>image {
    visibility: visible !important;
    opacity: 1 !important;
    filter: grayscale(0%) brightness(0) !important;
    transform: scale(0.75) !important;
}

.titlebar-min:hover>image {
    position: relative !important;
    top: 0.5px;
}

#urlbar #identity-box.extensionPage #identity-icon-label,
#PanelUI-menu-button {
    display: none !important;
}

#unified-extensions-button {
    padding: 0px !important;
    min-height: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    margin-left: 15px !important;
    align-self: center;
    border-radius: 50px;
    transition: transform 150ms ease, background-color 150ms ease !important;

    background-color: var(--zen-colors-border) !important;
}

#unified-extensions-button:hover>image {
    display: block;
    filter: grayscale(0%) brightness(0) !important;
    transform: scale(0.65) !important;
}

#unified-extensions-button>image {
    background-color: transparent !important;
    display: none;
}

#unified-extensions-button:hover {
    background-color: hsl(265, 65%, 50%) !important;
    transform: scale(1.15) !important;
}


#titlebar {
    width: 195px !important;
    border-color: rgb(35, 35, 35) !important;
}

#zen-current-workspace-indicator {
    padding-left: 9px !important;
}

Readme

# Modern UI - Zen-Browser-Mod

This Zen-Browser-Mod tries to implement various UI enhancements.

## Features

- **Center Searchbar URL**  
  The URL in the search bar is centered for a more balanced and visually appealing layout.

- **Remove Background Color for "Identity"-Box**  
  The background color of the identity box is removed to give it a cleaner look.

- **Change Spacing for Window-Button Box**  
  Adjusts the spacing between the window buttons to create a more consistent layout.

- **Buttons**  
  The following changes are applied to the window buttons:
  - **Circle Styled Buttons**: The window buttons (min,max,restore,close) are now circular, on hover, the buttons color up and show the icon of action.
  - **Minimize Button**: The minimize button is styled with a soft green color.
  - **Maximize&Restore Button**: The maximize&restore button is colored yellow.
  - **Close Button**: The close button is highlighted with a soft red color.
  - **Extension Button**: The close button is highlighted with a purple tint. 
  
  NOTE: It is recommended to put the extension-button on the right side beside pinned extensions!

- **Removes Extension name & application button**  
  The extension name is removed on extension-related sites, along with hiding the application button for a cleaner UI.

- **Widen Sidebar & Reduce Border Brightness**  
  The sidebar is widened for better content visibility, and the border brightness is reduced.

- **Adjust Workspace Indicator**  
  The workspace indicator is adjusted to align with the tab icons.

<br>

### Future Ideas
Currently, there is no way to choose which changes of this mod you want to have enabled. In the future I am planning on adding preferences, so that one can choose only the changes they prefer to have active.

Preferences

{}

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-966 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.