mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Update Sidebar Expand on Hover to 2.0.0
This commit is contained in:
Uiniel
parent
2a9820d3e9
commit
5ab28a07df
4 changed files with 245 additions and 258 deletions
|
|
@ -1,180 +1,118 @@
|
||||||
:root:has(#customization-container) {
|
:root:has(#customization-container:not([hidden])) {
|
||||||
|
|
||||||
/* Show flexible space in customiation mode in top buttons, since this mod allows them there */
|
/* Show flexible space in customiation mode in top buttons, since this mod allows them there */
|
||||||
#zen-sidebar-top-buttons-customization-target toolbarspring {
|
#zen-sidebar-top-buttons-customization-target toolbarspring {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Compact mode detection changed, so it got moved here */
|
:root:not([zen-compact-mode="true"], :has(#customization-container:not([hidden]))) {
|
||||||
:root:not([zen-compact-mode="true"]):has(#navigator-toolbox:not([zen-sidebar-expanded="true"])) {
|
--tab-min-width: calc(36px) !important;
|
||||||
|
--zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px) !important;
|
||||||
|
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--tab-block-margin) + var(--zen-toolbox-padding) * 2) !important;
|
||||||
|
--zen-toolbox-min-width: 1px !important;
|
||||||
|
--zen-sidebar-width: var(--zen-toolbox-max-width) !important;
|
||||||
|
|
||||||
|
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
|
||||||
|
#zen-current-workspace-indicator-container {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#zen-sidebar-splitter {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change tab shape to square when collapsed */
|
||||||
|
tab:not([zen-essential]) .tab-background {
|
||||||
|
min-width: var(--tab-min-width) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center tab icon */
|
||||||
|
.tab-icon-stack > .tab-icon-image {
|
||||||
|
margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Same design as tabs for New Tab button and other toolbarbuttons */
|
||||||
|
#TabsToolbar-customization-target toolbarbutton {
|
||||||
|
margin: var(--tab-block-margin) !important;
|
||||||
|
padding: 0 calc(var(--tab-inline-padding) - var(--tab-block-margin)) !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
|
||||||
|
& > .toolbarbutton-icon {
|
||||||
|
margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
|
||||||
|
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .toolbarbutton-text {
|
||||||
|
padding: 0 !important;
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stop New Tab button from increasing the width */
|
||||||
|
.zen-workspace-tabs-section {
|
||||||
|
width: calc(var(--tab-min-width) + var(--tab-block-margin)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
tab[pinned]:not([zen-essential]) > stack {
|
||||||
|
--tab-inline-padding: 8px !important;
|
||||||
|
& > .tab-content {
|
||||||
|
padding: 0 var(--tab-inline-padding) !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
justify-content: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) {
|
||||||
|
|
||||||
|
#navigator-toolbox {
|
||||||
|
margin-top: var(--zen-toolbar-height) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
|
||||||
|
margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Move topbar buttons in the now empty space */
|
/* Move topbar buttons in the now empty space */
|
||||||
@media (not (-moz-platform: macos)) {
|
@media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) and (not (-moz-platform: macos)) {
|
||||||
#browser:has(#navigator-toolbox:not([zen-right-side="true"])) {
|
#browser:has(#navigator-toolbox:not([zen-right-side="true"])) {
|
||||||
#zen-appcontent-wrapper {
|
#zen-appcontent-wrapper {
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
|
|
||||||
#zen-appcontent-navbar-container:has(#nav-bar>.titlebar-buttonbox-container:last-child) {
|
#zen-appcontent-navbar-container:has(#nav-bar>.titlebar-buttonbox-container:last-child) {
|
||||||
margin-left: calc(0px - var(--zen-toolbox-max-width)) !important;
|
margin-left: calc(0px - var(--zen-toolbox-max-width)) !important;
|
||||||
|
padding-left: var(--zen-element-separation);
|
||||||
|
|
||||||
#nav-bar-customization-target>toolbarbutton:first-child {
|
#nav-bar {
|
||||||
padding-inline-start: var(--toolbarbutton-outer-padding) !important;
|
margin-inline-start: var(--zen-element-separation);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#navigator-toolbox {
|
|
||||||
margin-top: var(--zen-toolbar-height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
|
|
||||||
margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* only use mod in collapsed toolbar mode */
|
|
||||||
:root:has(#navigator-toolbox:not([zen-sidebar-expanded="true"])) {
|
|
||||||
/* Width of the collapsed sidebar */
|
|
||||||
--zen-toolbox-max-width: 44px !important;
|
|
||||||
/* For automatic tab icon centering? */
|
|
||||||
--tab-collapsed-width: var(--zen-toolbox-max-width) !important;
|
|
||||||
|
|
||||||
#navigator-toolbox {
|
#navigator-toolbox {
|
||||||
z-index: 4 !important;
|
z-index: 4 !important;
|
||||||
}
|
|
||||||
|
|
||||||
@media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
|
|
||||||
|
|
||||||
#navigator-toolbox {
|
|
||||||
margin-top: var(--zen-toolbar-height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
|
|
||||||
margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* In compact mode (with topbar hidden) the topbar should be above the sidebar when hovered, while the sidebar should be above the page, doesn't work well with transitions but z-index is weird :c */
|
|
||||||
#browser:has(#zen-appcontent-navbar-container[zen-has-hover]) #navigator-toolbox {
|
|
||||||
z-index: 3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#PersonalToolbar[collapsed=false] {
|
|
||||||
height: 2.2em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabbrowser-tabs {
|
|
||||||
& .tabbrowser-tab {
|
|
||||||
&[pinned] .tab-close-button {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[pinned]:not([zen-essential]):hover .tab-reset-button,
|
|
||||||
&[pinned][visuallyselected]:not([zen-essential]) .tab-reset-button {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not([pinned]):hover .tab-close-button,
|
|
||||||
&[visuallyselected]:not([pinned]) .tab-close-button {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[zen-essential] {
|
|
||||||
margin: 0 !important;
|
|
||||||
--tab-min-height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not([zen-essential]) {
|
|
||||||
width: 100% !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
justify-content: space-between !important;
|
|
||||||
padding: 0 var(--tab-inline-padding) !important;
|
|
||||||
gap: var(--tab-inline-padding);
|
|
||||||
width: 100% !important;
|
|
||||||
align-items: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-label-container {
|
|
||||||
display: inline-block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
min-width: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.default_tab_background_shape") {
|
|
||||||
.tab-background {
|
|
||||||
width: 100% !important;
|
|
||||||
transform: translateX(2px) !important;
|
|
||||||
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
border-radius: 8px !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
|
|
||||||
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.default_tab_background_shape") {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#zen-essentials-container {
|
|
||||||
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
|
|
||||||
justify-content: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
|
|
||||||
#zen-current-workspace-indicator {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar {
|
|
||||||
width: var(--zen-toolbox-max-width) !important;
|
width: var(--zen-toolbox-max-width) !important;
|
||||||
transition: var(--theme-sidebar_expand_on_hover-transition_speed) width cubic-bezier(.24, -0.01, .58, 1) !important;
|
max-width: var(--zen-toolbox-max-width) !important;
|
||||||
overflow: clip;
|
min-width: var(--zen-toolbox-max-width) !important;
|
||||||
position: relative;
|
position: relative !important;
|
||||||
/* Ensure rounded corners */
|
|
||||||
border-radius: 8px !important;
|
|
||||||
/* Ensure child elements don't overflow */
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigator-toolbox[zen-right-side="true"] {
|
/*
|
||||||
direction: rtl !important;
|
I have no idea how to replicate the browser background, I don't know where the colors come from, the computed values in the inspector don't match anything on screen.
|
||||||
|
This is as close as I was able to get so far.
|
||||||
#titlebar {
|
*/
|
||||||
direction: ltr !important;
|
&::before {
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.inverted_tabs") {
|
|
||||||
.tabbrowser-tab {
|
|
||||||
direction: rtl !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#vertical-pinned-tabs-container:has(tab:not([hidden])) {
|
|
||||||
& .tabbrowser-tab {
|
|
||||||
max-width: unset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.custom_background") {
|
|
||||||
#titlebar::before {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
width: 100%;
|
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: 0.0;
|
opacity: 0.0;
|
||||||
transition: 60ms opacity ease-in calc(var(--theme-sidebar_expand_on_hover-transition_speed) - 60ms);
|
transition: 60ms opacity ease-in calc(var(--theme-sidebar_expand_on_hover-transition_speed) - 60ms), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
background: var(--zen-main-browser-background-toolbar) !important;
|
background-image: var(--zen-main-browser-background) !important;
|
||||||
|
background-color: var(--lwt-accent-color) !important;
|
||||||
background-attachment: fixed !important;
|
background-attachment: fixed !important;
|
||||||
background-size: 2000px !important;
|
background-size: 2000px !important;
|
||||||
backdrop-filter: blur(5px) !important;
|
backdrop-filter: blur(5px) !important;
|
||||||
|
|
@ -182,84 +120,69 @@
|
||||||
border-bottom-right-radius: 8px !important;
|
border-bottom-right-radius: 8px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titlebar:hover::before,
|
> #titlebar, > #zen-sidebar-top-buttons, > #nav-bar {
|
||||||
#titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))::before,
|
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding)) !important;
|
||||||
#navigator-toolbox[zen-has-hover] #titlebar::before,
|
max-width: var(--zen-sidebar-width) !important;
|
||||||
#navigator-toolbox[has-popup-menu] #titlebar::before,
|
min-width: var(--zen-toolbar-min-width) !important;
|
||||||
#navigator-toolbox[movingtab] #titlebar::before {
|
padding-right: var(--zen-toolbox-padding) !important;
|
||||||
opacity: 1.0 !important;
|
|
||||||
transition: 60ms opacity ease-out;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar:hover,
|
> #titlebar, > #zen-sidebar-top-buttons {
|
||||||
#titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button)),
|
overflow: hidden !important;
|
||||||
#navigator-toolbox[zen-has-hover] #titlebar,
|
transition: width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
|
||||||
#navigator-toolbox[has-popup-menu] #titlebar,
|
}
|
||||||
#navigator-toolbox[movingtab] #titlebar {
|
|
||||||
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
|
|
||||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-background {
|
> #nav-bar {
|
||||||
width: calc(100% - 4px) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
|
|
||||||
#tabs-newtab-button {
|
|
||||||
width: 100% !important;
|
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
display: flex !important;
|
padding-left: var(--zen-toolbox-padding) !important;
|
||||||
padding: 0 var(--tab-inline-padding) !important;
|
transition: var(--ext-theme-background-transition), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed) !important;
|
||||||
justify-content: start !important;
|
|
||||||
gap: var(--tab-inline-padding) !important;
|
|
||||||
|
|
||||||
.toolbarbutton-icon {
|
|
||||||
background: transparent !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
height: 16px !important;
|
|
||||||
width: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbarbutton-text {
|
|
||||||
display: flex !important;
|
|
||||||
background: transparent !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbarbutton-text:before {
|
|
||||||
text-overflow: clip !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-sidebar-top-buttons {
|
/* Essentials */
|
||||||
width: 100% !important;
|
#zen-essentials-container {
|
||||||
min-height: unset !important;
|
display: flex !important;
|
||||||
|
justify-content: center !important;
|
||||||
#zen-sidebar-top-buttons-customization-target:not(:has(*)) {
|
gap: 0 !important;
|
||||||
padding: 0 !important;
|
overflow-x: scroll !important;
|
||||||
|
|
||||||
|
> .tabbrowser-tab {
|
||||||
|
flex: 1 !important;
|
||||||
|
/* Todo change this from hardcoded value */
|
||||||
|
min-width: 40px !important;
|
||||||
|
margin-inline: calc(var(--zen-toolbox-padding) - 2px) !important;
|
||||||
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
||||||
|
min-width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
||||||
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hide empty top buttons */
|
||||||
|
#zen-sidebar-top-buttons:not(:has(:not(#zen-sidebar-top-buttons-separator, #zen-sidebar-top-buttons-customization-target))) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
#zen-sidebar-icons-wrapper,
|
#zen-sidebar-bottom-buttons,
|
||||||
#zen-sidebar-top-buttons-customization-target {
|
#zen-sidebar-top-buttons-customization-target {
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
display: flex;
|
|
||||||
flex-direction: row !important;
|
|
||||||
gap: 0 !important;
|
gap: 0 !important;
|
||||||
|
|
||||||
&> :not(panel) {
|
& > :not(panel,#zen-sidebar-top-buttons-separator) {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
width: 36px !important;
|
min-width: fit-content !important;
|
||||||
height: 36px !important;
|
min-height: fit-content !important;
|
||||||
flex-grow: 1 !important;
|
flex-grow: 1 !important;
|
||||||
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
||||||
|
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
||||||
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
||||||
margin-inline: 2px !important;
|
margin-inline: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
toolbarspring {
|
toolbarspring {
|
||||||
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) cubic-bezier(.001,1,.003,0.99),
|
||||||
|
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
||||||
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;;
|
||||||
flex-grow: 100 !important;
|
flex-grow: 100 !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
@ -275,13 +198,50 @@
|
||||||
toolbarbutton {
|
toolbarbutton {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
flex-grow: 1 !important;
|
flex-grow: 1 !important;
|
||||||
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
||||||
|
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
||||||
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
||||||
margin-inline: 2px !important;
|
margin-inline: 2px !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tabbrowser-arrowscrollbox-periphery {
|
||||||
|
margin-inline: 0 !important;
|
||||||
|
|
||||||
|
/* Decrease the seperator line to the same length as before */
|
||||||
|
&::before {
|
||||||
|
margin-inline: var(--tab-block-margin);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#navigator-toolbox:not([zen-has-hover], [has-popup-menu], [movingtab]) #titlebar:not(#titlebar:hover, #titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))) {
|
/* Expanded bar */
|
||||||
|
#navigator-toolbox:is(
|
||||||
|
[zen-has-hover],
|
||||||
|
[movingtab],
|
||||||
|
[flash-popup],
|
||||||
|
[has-popup-menu],
|
||||||
|
:has(.tabbrowser-tab:active),
|
||||||
|
:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open]),
|
||||||
|
) {
|
||||||
|
--zen-sidebar-width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
|
||||||
|
&::before {
|
||||||
|
opacity: 1.0;
|
||||||
|
transition: 60ms opacity ease-in, width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Collapsed bar */
|
||||||
|
#navigator-toolbox:not(
|
||||||
|
[zen-has-hover],
|
||||||
|
[movingtab],
|
||||||
|
[flash-popup],
|
||||||
|
[has-popup-menu],
|
||||||
|
:has(.tabbrowser-tab:active),
|
||||||
|
:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open])
|
||||||
|
) {
|
||||||
|
|
||||||
|
/* Show only active/first/no(todo) button*/
|
||||||
#zen-workspaces-button {
|
#zen-workspaces-button {
|
||||||
toolbarbutton:not([active="true"]) {
|
toolbarbutton:not([active="true"]) {
|
||||||
flex-grow: 0 !important;
|
flex-grow: 0 !important;
|
||||||
|
|
@ -289,11 +249,34 @@
|
||||||
margin-inline: 0 !important;
|
margin-inline: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#zen-essentials-container:has([selected]) > .tabbrowser-tab:not([selected]),
|
||||||
|
#zen-essentials-container:not(:has([selected])) > .tabbrowser-tab:not(:first-child) {
|
||||||
|
flex-grow: 0 !important;
|
||||||
|
width: 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
margin-inline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
toolbarspring {
|
||||||
|
flex-grow: 0 !important;
|
||||||
|
width: 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
margin-inline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Workaround for invisible top buttons seperator*/
|
||||||
|
#zen-sidebar-top-buttons-customization-target > :not(:nth-child(1 of toolbarbutton, toolbaritem))
|
||||||
|
{
|
||||||
|
flex-grow: 0 !important;
|
||||||
|
width: 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
margin-inline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
||||||
|
#zen-sidebar-bottom-buttons > :not(:first-child)
|
||||||
#zen-sidebar-icons-wrapper>toolbarbutton:not(:first-child),
|
{
|
||||||
#zen-sidebar-top-buttons-customization-target>toolbarbutton:not(:first-child) {
|
|
||||||
flex-grow: 0 !important;
|
flex-grow: 0 !important;
|
||||||
width: 0 !important;
|
width: 0 !important;
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
|
|
@ -302,13 +285,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
||||||
|
|
||||||
/* Show first child only when no visible workspace switcher */
|
/* Show first child only when no visible workspace switcher */
|
||||||
#zen-sidebar-icons-wrapper:not(:has(#zen-workspaces-button:not([dont-show="true"])))>*:not(:first-child),
|
#zen-sidebar-bottom-buttons:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > :not(:first-child),
|
||||||
#zen-sidebar-top-buttons-customization-target:not(:has(#zen-workspaces-button:not([dont-show="true"])))>*:not(:first-child),
|
|
||||||
/* Show active workspace only when visible workspace switcher */
|
/* Show active workspace only when visible workspace switcher */
|
||||||
#zen-sidebar-icons-wrapper:has(#zen-workspaces-button:not([dont-show="true"]))>*:not(#zen-workspaces-button),
|
#zen-sidebar-bottom-buttons:has(#zen-workspaces-button:not([dont-show="true"])) > :not(#zen-workspaces-button) {
|
||||||
#zen-sidebar-top-buttons-customization-target:has(#zen-workspaces-button:not([dont-show="true"]))>*:not(#zen-workspaces-button) {
|
|
||||||
flex-grow: 0 !important;
|
flex-grow: 0 !important;
|
||||||
width: 0 !important;
|
width: 0 !important;
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
|
|
@ -316,4 +296,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Support for tabs on the right */
|
||||||
|
#navigator-toolbox[zen-right-side="true"] {
|
||||||
|
direction: rtl !important;
|
||||||
|
|
||||||
|
#titlebar, #zen-sidebar-top-buttons {
|
||||||
|
direction: ltr !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#titlebar {
|
||||||
|
padding-left: var(--zen-toolbox-padding) !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-moz-bool-pref: "zen.view.use-single-toolbar") {
|
||||||
|
#nav-bar {
|
||||||
|
direction: ltr !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,44 +1,32 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"property": "theme.sidebar_expand_on_hover.hide_workspace_indicator",
|
"property": "theme.sidebar_expand_on_hover.hide_workspace_indicator",
|
||||||
"label": "Hide top workspace indicator",
|
"label": "Hide top workspace indicator",
|
||||||
"type": "checkbox",
|
"type": "checkbox",
|
||||||
"defaultValue": true
|
"defaultValue": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"property": "theme.sidebar_expand_on_hover.custom_background",
|
"property": "theme.sidebar_expand_on_hover.collapse_buttons",
|
||||||
"label": "My theme overwrites the #TabsToolbar background (e.g. catppuccin)",
|
"label": "Collapse the buttons to only show current workspace",
|
||||||
"type": "checkbox",
|
"type": "checkbox",
|
||||||
"defaultValue": false
|
"defaultValue": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"property": "theme.sidebar_expand_on_hover.collapse_buttons",
|
"property": "theme.sidebar_expand_on_hover.inverted_tabs",
|
||||||
"label": "Collapse the buttons to only show current workspace",
|
"label": "Inverted Tab Direction",
|
||||||
"type": "checkbox",
|
"type": "checkbox",
|
||||||
"defaultValue": true
|
"defaultValue": false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"property": "theme.sidebar_expand_on_hover.default_tab_background_shape",
|
"property": "theme.sidebar_expand_on_hover.expanded_width",
|
||||||
"label": "Default Tab Background Shape",
|
"label": "Width of the expanded sidebar",
|
||||||
"type": "checkbox",
|
"type": "string",
|
||||||
"defaultValue": true
|
"defaultValue": "300px"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"property": "theme.sidebar_expand_on_hover.inverted_tabs",
|
"property": "theme.sidebar_expand_on_hover.transition_speed",
|
||||||
"label": "Inverted Tab Direction",
|
"label": "Transition speed of the sidebar",
|
||||||
"type": "checkbox",
|
"type": "string",
|
||||||
"defaultValue": false
|
"defaultValue": "120ms"
|
||||||
},
|
|
||||||
{
|
|
||||||
"property": "theme.sidebar_expand_on_hover.expanded_width",
|
|
||||||
"label": "Width of the expanded sidebar",
|
|
||||||
"type": "string",
|
|
||||||
"defaultValue": "300px"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"property": "theme.sidebar_expand_on_hover.transition_speed",
|
|
||||||
"label": "Transition speed of the sidebar",
|
|
||||||
"type": "string",
|
|
||||||
"defaultValue": "120ms"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -2,16 +2,15 @@
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
|
|
||||||
|
**Important:** set the browser layout to Single Toolbar or Multiple Toolbar depending on how the expanded sidebar should look like.
|
||||||
|
|
||||||
With this mod the sidebar expands when you hover it. It only works when the browser layout setting is set to collapsed toolbar.
|
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).
|
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
|
## 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)*
|
||||||
- **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)_
|
- **Collapse the buttons to only show current workspace**: If you don't wish for your buttons to only show your current workspace when collapsed: deactivate this setting and it shows the first button instead when collapsed *(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)_
|
- **Inverted Tab Direction**: Favicon on the right, title in the middle, close button on the left. Less moving parts when the sidebar is on the right. *(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: 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)*
|
||||||
- **Default Tab Background Shape**: When turned on every corner of the tab background is rounded (like in default zen) _(default: on)_
|
- **Transition speed of the sidebar**: Speed of the collapsing/expanding animation *(default: 120ms)*
|
||||||
- **Inverted Tab Direction**: Favicon on the right, title in the middle, close button on the left. Less moving parts when the sidebar is on the right. _(default: off)_
|
|
||||||
- **Width of the expanded sidebar**: Here you can change the width of the expanded sidebar _(default: 300px)_
|
|
||||||
- **Transition speed of the sidebar**: Speed of the collapsing/expanding animation _(default: 120ms)_
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md",
|
"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",
|
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/image.png",
|
||||||
"author": "Uiniel",
|
"author": "Uiniel",
|
||||||
"version": "1.1.4",
|
"version": "2.0.0",
|
||||||
"tags": [],
|
"tags": [],
|
||||||
"createdAt": "2024-12-10",
|
"createdAt": "2024-12-10",
|
||||||
"updatedAt": "2025-01-27",
|
"updatedAt": "2025-01-27",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue