mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 01:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Zen UI components and styles for improved compact mode and URL bar behavior

Browse Source
This commit is contained in:
mr. M
2024-12-11 17:31:02 +01:00
parent 3a9a8d4e5b
commit 735d6bf85c
5 changed files with 42 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/app/profile/zen-browser.js
View File

@@ -107,6 +107,7 @@ pref('zen.view.compact.toolbar-flash-popup.duration', 800);
pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
pref('zen.view.compact.color-toolbar', true);
pref('zen.view.compact.color-sidebar', true);
pref('zen.view.use-deprecated-urlbar', false);
#ifdef XP_MACOSX
// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens

2
src/browser/base/content/ZenUIManager.mjs
View File

@@ -392,7 +392,7 @@ var gZenVerticalTabsManager = {
navBar.append(windowButtons);
}
} else { // not windows styled buttons
if (isRightSide) {
if (isRightSide || !isSidebarExpanded) {
navBar.prepend(windowButtons);
} else {
topButtons.prepend(windowButtons);

9
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -19,6 +19,15 @@
display: none !important;
}
#zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
#navigator-toolbox {
--zen-toolbox-max-width: 54px !important;
--zen-compact-float: calc(var(--zen-element-separation) - 1px);

17
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -164,15 +164,6 @@
&[should-hide='true'] {
%include vertical-tabs-topbar.inc.css
}
:root[zen-window-buttons-reversed='true'] & {
&:has(#PersonalToolbar[collapsed="true"]) {
opacity: 0;
& > * {
display: none;
}
}
}
}
}
@@ -335,14 +326,6 @@
}
}
:root:not([customizing]) #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
#vertical-pinned-tabs-container {
padding-inline-end: 0 !important;
display: flex !important;

60
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -337,39 +337,41 @@ button.popup-notification-dropmarker {
}
}
#urlbar[open] {
z-index: 1000;
min-width: 45vw;
max-width: 45vw;
top: 0 !important;
--urlbar-container-height: 55px !important;
--urlbar-margin-inline: 10px !important;
font-size: 1.1em;
@media not (-moz-bool-pref: 'zen.view.use-deprecated-urlbar') {
#urlbar[open] {
z-index: 1000;
min-width: 45vw;
max-width: 45vw;
top: 0 !important;
--urlbar-container-height: 55px !important;
--urlbar-margin-inline: 10px !important;
font-size: 1.1em;
& #urlbar-background {
/* We cant have a transparent background with a backdrop-filter because on normal websites,
the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
due to performance issues */
background-color: var(--zen-branding-bg) !important;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
outline-offset: -1px !important;
}
& #urlbar-background {
/* We cant have a transparent background with a backdrop-filter because on normal websites,
the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
due to performance issues */
background-color: var(--zen-branding-bg) !important;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
outline-offset: -1px !important;
}
& #identity-box {
margin-right: var(--urlbar-margin-inline);
}
& #identity-box {
margin-right: var(--urlbar-margin-inline);
}
:root[zen-right-side='true'] & {
right: 0;
}
position: absolute;
:root[zen-right-side='true'] & {
right: 0;
}
position: absolute;
top: calc(var(--zen-toolbar-height) * 2) !important;
left: 28vw;
top: calc(var(--zen-toolbar-height) * 2) !important;
left: 28vw;
#urlbar-container:has(&) {
border-radius: 10px;
background: var(--toolbarbutton-hover-background);
#urlbar-container:has(&) {
border-radius: 10px;
background: var(--toolbarbutton-hover-background);
}
}
}