[create-theme]: Increase Compact Hover

[burnt0rice]

Name

Increase Compact Hover

Description

This theme increases the hover area in compact mode of the sidebar and toolbar in the Zen Browser.

Homepage

https://github.com/burnt0rice/zen-themes/tree/main/increase-compact-hover

Image

https://github.com/burnt0rice/zen-themes/blob/main/increase-compact-hover/image.png?raw=true

Type

• [ ] JSON Color Theme

Theme Styles

/* Toolbar */
@media not (-moz-bool-pref: "uc.increase-compact-hover.toolbar.disable") {
  @media (-moz-bool-pref: "zen.view.compact") {
    @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
      #zen-appcontent-navbar-container {
        transform: translateY(calc(-100% + 35px)) !important;
      }

      #zen-appcontent-navbar-container:hover,
      #zen-appcontent-navbar-container:focus-within,
      #zen-appcontent-navbar-container[zen-user-show],
      #mainPopupSet:has(> #appMenu-popup:hover)~#zen-appcontent-navbar-container,
      #zen-appcontent-navbar-container:has([open="true"]) {
        transform: translateY(0) !important;
      }
    }
  }
}

/* Sidebar */
@media not (-moz-bool-pref: "uc.increase-compact-hover.sidebar.disable") {
  @media (-moz-bool-pref: "zen.view.compact") {
    #navigator-toolbox {
      transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2) + 30px)) !important;
    }

    #navigator-toolbox:hover,
    #navigator-toolbox:focus-within,
    #navigator-toolbox[zen-user-show],
    #mainPopupSet:has(> #appMenu-popup:hover)~toolbox,
    #navigator-toolbox:has([open="true"]:not(tab):not(#zen-sidepanel-button)) {
      transform: none !important;
    }
  }
}

Readme

# Increase Compact Hover

This theme increases the hover area in compact mode of the sidebar and toolbar in the Zen Browser.

> Small warning: This theme may get in the way on some websites.

## What the theme does

This theme does (default):

- Increases (``+30px``) the hover area of the sidebar and toolbar in compact mode
- Makes the sidebar and toolbar more accessible in compact mode

## What configuration options are available

- Disable the theme for the sidebar
- Disable the theme for the toolbar

Have any suggestions or feedback? Feel free to open an issue in the [GitHub repository](https://github.com/burnt0rice/zen-themes/issues).

Preferences

{
  "uc.increase-compact-hover.toolbar.disable": "Disable the extended hover for the toolbar",
  "uc.increase-compact-hover.sidebar.disable": "Disable the extended hover for the sidebar"
}

[github-actions[bot]]

Thank you for your contribution! :tada:

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-290 branch.

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