[create-theme]: Compact Sidebar Micro Animation

[Nimit1705]

Name

Sidebar animation

Description

Refines Zen's compact sidebar with smooth reveal and fadeout animation on hover.

Homepage

https://github.com/Nimit1705/Zen-sidebar-animation

Image

https://github.com/Nimit1705/Zen-sidebar-animation/blob/main/sidebar-animation-thumbnail.png?raw=true

Type

• JSON Color Theme

Theme Styles

@keyframes bounce {
    0% {
      left: calc(-1 * var(--zen-sidebar-width));
      opacity: 1;
    }
  
    50% {
      left: 0;
    }
  
    100% {
      left:-8px;
    }
  }
  
  @keyframes right-bounce {
    0% {
      right: calc(-1 * var(--zen-sidebar-width));
      opacity: 1;
    }
  
    50% {
      right: 0;
    }
  
    100% {
      right: -14px;
    }
  }
  
  @keyframes fadeout {
    0% {
      left: -8px;
      opacity: 1;
    }
  
    100% {
      left: calc(-1 * var(--zen-sidebar-width) + 5px);
      opacity: 1;
    }
  }
  
  @keyframes fadeout-right {
    0% {
      right: -8px;
      opacity: 1;
    }
  
    100% {
      right: calc(-1 * var(--zen-sidebar-width));
      opacity: 1;
    }
  }
  
  @media (-moz-bool-pref: "zen.view.compact") {
      #navigator-toolbox {
        box-sizing: content-box !important;
        animation: fadeout 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
        animation-fill-mode: forwards !important;
        padding-left: 14px !important;
  
        @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
          padding-left: 6px !important;
          padding-right: 14px !important;
         
          animation: fadeout-right 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
          animation-fill-mode: forwards !important;
        }
  
        &:is([zen-user-show], [zen-has-hover]), &:hover {
          animation: bounce 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
          animation-fill-mode: forwards !important;
  
          @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
            animation: right-bounce 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
            animation-fill-mode: forwards !important;
          }
        }
      }
    }

Readme

# Compact Sidebar Micro-Animation

Enhance the user experience of the [Zen Browser](https://zen-browser.app/) with a refined animation for the sidebar in compact mode. This mod introduces smooth, visually pleasing reveal and fadeout effects for the sidebar when hovered over.

---

Thumbnail

![image](https://github.com/Nimit1705/Zen-sidebar-animation/blob/main/sidebar-animation-thumbnail.png?raw=true)

### Sidebar in compact mode
![image](https://github.com/Nimit1705/Zen-sidebar-animation/blob/main/sidebar-animation.png?raw=true)


---

You can find the code of the mod inside this repository!

Preferences

No response

[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-935 branch.

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