[breaking] changed default layout of the customizable UI

This commit is contained in:
mr. M
2024-10-29 23:42:05 +01:00
parent a08df8f9ef
commit 0552c2f245
6 changed files with 34 additions and 14 deletions

View File

@@ -2,7 +2,7 @@ export var ZenCustomizableUI = new (class {
constructor() {}
TYPE_TOOLBAR = 'toolbar';
defaultSidebarIcons = ['zen-sidepanel-button', 'zen-workspaces-button', 'new-tab-button'];
defaultSidebarIcons = ['zen-sidepanel-button', 'zen-workspaces-button', 'downloads-button'];
startup(CustomizableUIInternal) {
CustomizableUIInternal.registerArea(

View File

@@ -73,7 +73,7 @@
tabs.style.maxHeight = '0px'; // reset to 0
const toolbarRect = toolbarItems.getBoundingClientRect();
// -5 for the controls padding
let totalHeight = toolbarRect.height - (this.contentElementSeparation * 2) - 5;
let totalHeight = toolbarRect.height - (this.contentElementSeparation) - 5;
// remove the height from other elements that aren't hidden
const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
for (let tab of otherElements) {

View File

@@ -95,6 +95,12 @@
--tab-selected-bgcolor: light-dark(rgba(255,255,255,.7), color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%));
grid-gap: 0 !important;
&[overflow]::after,
#vertical-tabs-newtab-button {
/* Hide separator they give us, eww */
display: none !important;
}
& .tabbrowser-tab {
animation: zen-slide-in 0.2s ease-in-out;
@@ -354,12 +360,24 @@
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
)
) {
--tab-min-width: 36px !important;
/* Important: When changin this value, make sure expand on hover doesn't break! */
--zen-toolbox-max-width: 49px; /* 1px more because the browser view has one pixel of padding to avoid the border being cut off */
--zen-toolbox-padding: 8px;
--zen-toolbox-padding: 6px;
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
--zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
&[zen-right-side='true'] {
margin-left: var(--zen-tabbar-offset);
}
&:not([zen-right-side='true']) {
margin-right: var(--zen-tabbar-offset);
}
& #vertical-tabs-newtab-button {
padding: 0 !important;
background: transparent !important;
@@ -422,7 +440,6 @@
& #tabbrowser-tabs {
margin-top: -2px;
--tab-min-width: 36px !important;
& .tabbrowser-tab {
margin: 0 auto;