mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-02 07:58:40 +00:00
[breaking] changed default layout of the customizable UI
This commit is contained in:
@@ -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(
|
||||
|
@@ -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) {
|
||||
|
Submodule src/browser/base/content/zen-components updated: 8ecd316c18...99003f3cb5
@@ -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;
|
||||
|
Reference in New Issue
Block a user