mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-08 01:10:01 +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