Add theme: Sidebar Expand on Hover

This commit is contained in:
Uiniel 2024-12-10 21:10:00 +00:00 committed by GitHub
parent 17c51d8546
commit f1ef489df9
5 changed files with 207 additions and 0 deletions

View file

@ -0,0 +1,152 @@
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
#zen-current-workspace-indicator {
display: none !important;
}
}
.tab-content {
justify-content: space-between !important;
padding: 0 var(--tab-inline-padding) !important;
gap: var(--tab-inline-padding);
width: 100% !important;
}
.tabbrowser-tab {
width: 100% !important;
margin: 0 !important;
}
.tab-label-container {
display: inline-block !important;
}
#TabsToolbar {
padding-top: var(--zen-element-separation) !important;
--tab-collapsed-width: 44px !important;
width: var(--tab-collapsed-width) !important;
transition: 120ms width cubic-bezier(.24, -0.01, .58, 1) !important;
overflow: clip;
position: relative;
}
#vertical-pinned-tabs-container:has(tab:not([hidden])) {
& .tabbrowser-tab {
max-width: unset !important;
}
}
#zen-sidebar-top-buttons {
margin: 0 !important;
width: var(--tab-collapsed-width) !important;
}
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.custom_background") {
#TabsToolbar::before {
position: absolute;
content: "";
width: 100%;
height: calc(100% + var(--zen-element-separation));
top: calc(0px - var(--zen-element-separation));
opacity: 0.0;
transition: 60ms opacity ease-in 60ms;
z-index: -1;
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important;
backdrop-filter: blur(5px) !important;
}
#TabsToolbar:hover::before {
opacity: 1.0 !important;
;
transition: 60ms opacity ease-out;
}
}
#TabsToolbar:hover {
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
box-shadow: 1px -1px black;
}
.tab-background {
width: calc(100% - 4px) !important;
}
#zen-sidebar-icons-wrapper {
justify-content: space-evenly !important;
display: flex;
flex-direction: row !important;
transition: gap 120ms ease-in-out !important;
}
#zen-workspaces-button {
flex-direction: row !important;
}
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
#zen-sidebar-icons-wrapper {
justify-content: start !important;
padding-left: calc((var(--tab-collapsed-width) - 36px ) / 2) !important;;
}
}
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
#TabsToolbar:not(#TabsToolbar:hover) {
#zen-sidebar-icons-wrapper {
gap: 0 !important;
;
}
#zen-workspaces-button {
gap: 0 !important;
&:not([as-button="true"]) {
& toolbarbutton {
&[active="true"]::after {
left: 50% !important;
bottom: -2px !important;
}
}
}
&:not([as-button="true"]) {
& toolbarbutton {
&:not([active="true"]) {
width: 0 !important;
}
}
}
}
#zen-sidebar-icons-wrapper> :not(#zen-workspaces-button) {
width: 0 !important;
}
}
#zen-workspaces-button {
&:not([as-button="true"]) {
& toolbarbutton {
&[active="true"]::after {
animation: none !important;
}
}
}
&:not([as-button="true"]) {
& toolbarbutton {
&:not([active="true"]) {
transition: width 120ms ease-in-out !important;
overflow: hidden;
}
}
}
}
#zen-sidebar-icons-wrapper> :not(#zen-workspaces-button) {
transition: width 120ms ease-in-out !important;
width: 42px;
overflow: hidden !important;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -0,0 +1,26 @@
[
{
"property": "theme.sidebar_expand_on_hover.hide_workspace_indicator",
"label": "Hide top workspace indicator",
"type": "checkbox",
"defaultValue": true
},
{
"property": "theme.sidebar_expand_on_hover.custom_background",
"label": "My theme overwrites the #TabsToolbar background (e.g. catppuccin)",
"type": "checkbox",
"defaultValue": false
},
{
"property": "theme.sidebar_expand_on_hover.collapse_buttons",
"label": "Collapse the buttons to only show current workspace",
"type": "checkbox",
"defaultValue": true
},
{
"property": "theme.sidebar_expand_on_hover.expanded_width",
"label": "Width of the expanded sidebar",
"type": "string",
"defaultValue": "300px"
}
]

View file

@ -0,0 +1,14 @@
# Sidebar Expand on Hover
## Description
With this mod the sidebar expands when you hover it. It only works when the browser layout setting is set to collapsed toolbar.
Addionally this mod collapses the buttons below the tabs to provide a smoother experience. Per default your active workspace is shown while the sidebar is collapsed (only works when the workspace switcher is placed there).
## Preferences
- **Hide top workspace indicator**: since the active workspace is already shown below, this theme hides the workspace indicator at the top, if you don't want this: deactivate this setting. *(default: on)*
- **My theme overwrites the #TabsToolbar background (e.g. catppuccin)**: Some themes overwrite the background property of #TabsToolbar (e.g. catppuccin). If you notice some visual issues while the sidebar is expanded due to the use of a theme: try activating this settings and hope that is helps *(default: off)*
- **Collapse the buttons to only show current workspace**: If you don't wish for your buttons to only show your current workspace when collapsed (or you don't even have the workspace switcher there): deactivate this setting and it shows the first button instead when collapsed *(default: on)*
- **Width of the expanded sidebar**: Here you can change the width of the expanded sidebar *(default: 300px)*

View file

@ -0,0 +1,15 @@
{
"id": "bd92a9a0-1c00-4187-a66e-94c389fa5a59",
"name": "Sidebar Expand on Hover",
"description": "Readds the expand on hover feature to zen with a few extra features",
"homepage": "https://github.com/Uiniel/zen-mods/tree/main/sidebar-expand-on-hover",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/image.png",
"author": "Uiniel",
"version": "1.0.0",
"tags": [],
"createdAt": "2024-12-10",
"updatedAt": "2024-12-10",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json"
}