mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Add theme: Sidebar Expand on Hover
This commit is contained in:
parent
17c51d8546
commit
f1ef489df9
5 changed files with 207 additions and 0 deletions
152
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/chrome.css
Normal file
152
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/chrome.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
BIN
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/image.png
Normal file
BIN
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 19 KiB |
26
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json
Normal file
26
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json
Normal 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"
|
||||||
|
}
|
||||||
|
]
|
14
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md
Normal file
14
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md
Normal 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)*
|
15
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/theme.json
Normal file
15
themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/theme.json
Normal 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"
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue