mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-04 08:56:34 +00:00
Merge branch 'dev' into formatting
Signed-off-by: mr. m <91018726+mr-cheff@users.noreply.github.com>
This commit is contained in:
mr. m
@@ -45,7 +45,7 @@ export var ZenCustomizableUI = new (class {
|
||||
customizationtarget="zen-sidebar-top-buttons-customization-target"
|
||||
mode="icons">
|
||||
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
|
||||
<toolbarbutton hidden="true" removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
|
||||
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
|
||||
<toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
|
||||
</hbox>
|
||||
</toolbar>
|
||||
|
||||
@@ -126,6 +126,7 @@ var gZenVerticalTabsManager = {
|
||||
Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
|
||||
|
||||
this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement;
|
||||
|
||||
@@ -154,6 +155,11 @@ var gZenVerticalTabsManager = {
|
||||
}
|
||||
},
|
||||
|
||||
toggleExpand() {
|
||||
const newVal = !Services.prefs.getBoolPref('zen.view.sidebar-expanded');
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded', newVal);
|
||||
},
|
||||
|
||||
get navigatorToolbox() {
|
||||
if (this._navigatorToolbox) {
|
||||
return this._navigatorToolbox;
|
||||
@@ -202,15 +208,16 @@ var gZenVerticalTabsManager = {
|
||||
const topButtons = document.getElementById('zen-sidebar-top-buttons');
|
||||
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
|
||||
const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
|
||||
const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
|
||||
const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
|
||||
const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs;
|
||||
const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) || !isVerticalTabs;
|
||||
const titlebar = document.getElementById('titlebar');
|
||||
|
||||
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
|
||||
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
|
||||
|
||||
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
|
||||
if (isRightSide && isVerticalTabs) {
|
||||
if (isRightSide) {
|
||||
this.navigatorToolbox.setAttribute('zen-right-side', 'true');
|
||||
document.documentElement.setAttribute('zen-right-side', 'true');
|
||||
} else {
|
||||
@@ -218,6 +225,12 @@ var gZenVerticalTabsManager = {
|
||||
document.documentElement.removeAttribute('zen-right-side');
|
||||
}
|
||||
|
||||
if (isSidebarExpanded) {
|
||||
this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
|
||||
} else {
|
||||
this.navigatorToolbox.removeAttribute('zen-sidebar-expanded');
|
||||
}
|
||||
|
||||
const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
|
||||
if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons) || isCompactMode) {
|
||||
appContentNavbarContaienr.setAttribute('should-hide', 'true');
|
||||
@@ -237,9 +250,9 @@ var gZenVerticalTabsManager = {
|
||||
// tabboxWrapper.prepend(this.navigatorToolbox);
|
||||
}
|
||||
|
||||
if (!isVerticalTabs) {
|
||||
document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
|
||||
}
|
||||
//if (!isVerticalTabs) {
|
||||
// document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
|
||||
//}
|
||||
|
||||
let windowButtons = this.actualWindowButtons;
|
||||
let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
|
||||
index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63ab62acc7 100644
|
||||
index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..51e6c01c279e0105ec8ac08df0763027179c0616 100644
|
||||
--- a/browser/base/content/navigator-toolbox.inc.xhtml
|
||||
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
|
||||
@@ -2,7 +2,7 @@
|
||||
@@ -29,7 +29,15 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
|
||||
<toolbartabstop/>
|
||||
<hbox id="TabsToolbar-customization-target" flex="1">
|
||||
<toolbarbutton id="firefox-view-button"
|
||||
@@ -55,9 +55,14 @@
|
||||
@@ -40,6 +40,7 @@
|
||||
data-l10n-id="toolbar-button-firefox-view-2"
|
||||
role="button"
|
||||
aria-pressed="false"
|
||||
+ hidden="true"
|
||||
cui-areatype="toolbar"
|
||||
removable="true"/>
|
||||
|
||||
@@ -55,9 +56,14 @@
|
||||
# significantly, there is an optimization in
|
||||
# DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
|
||||
# the current structure that we may want to revisit.
|
||||
@@ -45,7 +53,7 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
|
||||
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
|
||||
<hbox id="tabbrowser-arrowscrollbox-periphery">
|
||||
<toolbartabstop/>
|
||||
@@ -100,11 +105,12 @@
|
||||
@@ -100,11 +106,12 @@
|
||||
#include private-browsing-indicator.inc.xhtml
|
||||
<toolbarbutton id="content-analysis-indicator"
|
||||
class="toolbarbutton-1 content-analysis-indicator-icon"/>
|
||||
@@ -61,7 +69,7 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
|
||||
<toolbar id="nav-bar"
|
||||
class="browser-toolbar chromeclass-location"
|
||||
data-l10n-id="navbar-accessible"
|
||||
@@ -487,10 +493,12 @@
|
||||
@@ -487,10 +494,12 @@
|
||||
consumeanchor="PanelUI-button"
|
||||
data-l10n-id="appmenu-menu-button-closed2"/>
|
||||
</toolbaritem>
|
||||
|
||||
@@ -56,7 +56,18 @@
|
||||
|
||||
@keyframes zen-slide-in {
|
||||
from {
|
||||
transform: translateX(-30px);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-slide-in-reverse {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
@@ -228,9 +239,9 @@
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
70% {
|
||||
80% {
|
||||
/* make the box grow to full width/height */
|
||||
opacity: .5;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateZ(0);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -253,31 +264,22 @@
|
||||
0% {
|
||||
/* make the box shrink to final width/height and x/y coordinates */
|
||||
transform: translate(-50%, -50%) translateZ(0);
|
||||
opacity: 1;
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
/* make the box grow to full width/height */
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateZ(0);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 87%;
|
||||
height: 102%;
|
||||
}
|
||||
|
||||
100% {
|
||||
/* make the box appear from initial width/height and x/y coordinates */
|
||||
transform: translate(-50%, -50%) translateZ(0);
|
||||
opacity: 0;
|
||||
width: 47%;
|
||||
height: 53%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) translateZ(0);
|
||||
width: 0%;
|
||||
height: 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -293,10 +295,10 @@
|
||||
to {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,8 +4,10 @@
|
||||
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
|
||||
position: relative;
|
||||
|
||||
/* For glance */
|
||||
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||||
|
||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
|
||||
border-radius: var(--zen-border-radius);
|
||||
overflow: hidden;
|
||||
margin: 1px;
|
||||
|
||||
|
||||
@@ -75,6 +75,7 @@
|
||||
#zen-appcontent-wrapper {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
}
|
||||
|
||||
.zen-glance-background {
|
||||
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||||
transform: scale(0.98);
|
||||
backdrop-filter: blur(5px);
|
||||
opacity: 0.6;
|
||||
@@ -28,7 +27,7 @@
|
||||
|
||||
& .browserContainer {
|
||||
opacity: 1;
|
||||
animation: zen-glance-content-animation-out .5s ease-in-out forwards !important;
|
||||
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
|
||||
|
||||
& browser {
|
||||
opacity: 1 !important;
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
#zen-sidebar-web-panel {
|
||||
border-radius: var(--zen-panel-radius);
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
background: var(--zen-colors-tertiary);
|
||||
@@ -105,21 +105,47 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
width: calc(var(--zen-element-separation) * 2 - 3px);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: ew-resize;
|
||||
|
||||
&::before {
|
||||
height: 30px;
|
||||
width: 3px;
|
||||
background: var(--zen-colors-border);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[side='right'] {
|
||||
left: initial;
|
||||
right: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[side='left'] {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[orient='horizontal'] {
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
cursor: ns-resize;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[side='bottom'] {
|
||||
@@ -251,8 +277,9 @@
|
||||
}
|
||||
|
||||
:root:not([zen-right-side='true']) {
|
||||
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
|
||||
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel:is([hidden='true'], [pinned='true']))) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* Styles for both vertical and horizontal tabs */
|
||||
@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
|
||||
@import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
|
||||
@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
|
||||
|
||||
#zen-tabbox-wrapper {
|
||||
position: relative;
|
||||
|
||||
@@ -1,20 +1,332 @@
|
||||
@media not (-moz-bool-pref: 'zen.tabs.vertical') {
|
||||
#browser,
|
||||
#navigator-toolbox {
|
||||
flex-direction: row;
|
||||
|
||||
max-width: unset !important;
|
||||
width: 100% !important;
|
||||
:root #browser {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
& #navigator-toolbox {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
max-width: unset !important;
|
||||
min-width: unset !important;
|
||||
width: 100% !important;
|
||||
padding: var(--zen-toolbox-padding) !important;
|
||||
}
|
||||
|
||||
|
||||
#tabbrowser-tabs {
|
||||
display: -webkit-box !important;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-pack: start;
|
||||
max-width: 10000px !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container-separator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container,
|
||||
#vertical-pinned-tabs-container,
|
||||
#tabbrowser-arrowscrollbox {
|
||||
max-height: unset !important;
|
||||
-webkit-box-flex: 1;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container:empty {
|
||||
-webkit-box-flex: 0 !important;
|
||||
width: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: none !important;
|
||||
visibility: collapse !important;
|
||||
}
|
||||
#navigator-toolbox {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
flex-direction: row !important;
|
||||
width: 100%;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container {
|
||||
--tab-min-height: 36px !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container .tabbrowser-tab {
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tabbrowser-tab {
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[zen-glance-tab="true"] {
|
||||
.tab-content {
|
||||
}
|
||||
|
||||
.tab-label-container {
|
||||
display: none !important;
|
||||
width: 0px !important;
|
||||
max-width: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox {
|
||||
display: flex !important;
|
||||
max-width: -moz-available;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
#TabsToolbar {
|
||||
flex-direction: row !important;
|
||||
gap: 8px;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[orient="vertical"] {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
tabs {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container {
|
||||
container-name: tab-container;
|
||||
container-type: normal;
|
||||
max-width: 36px !important;
|
||||
flex: 1 1 36px !important;
|
||||
}
|
||||
#vertical-pinned-tabs-container {
|
||||
container-name: tab-container;
|
||||
container-type: normal;
|
||||
max-width: 36px !important;
|
||||
min-width: 36px !important;
|
||||
flex: 1 1 36px !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tab-close-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tab-label-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tab-icon-image {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
container-name: tab-container;
|
||||
container-type: normal;
|
||||
max-width: 200px !important;
|
||||
min-width: 36px !important;
|
||||
flex: 1 1 150px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected] {
|
||||
flex: 2 1 150px !important;
|
||||
min-width: 32px !important;
|
||||
}
|
||||
|
||||
@container tab-container (max-width: 80px) {
|
||||
.tab-close-button {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
.tab-icon-image {
|
||||
padding: 0 !important;
|
||||
margin-left: min(2.5px, 5%) !important;
|
||||
margin-right: min(10px, 5%) !important;
|
||||
}
|
||||
.tab-label-container,
|
||||
.tab-content {
|
||||
margin: 0 !important;
|
||||
padding-left: min(8px, 5%) !important;
|
||||
padding-right: min(8px, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@container tab-container (max-width: 44px) {
|
||||
.tab-label-container {
|
||||
display: none !important;
|
||||
}
|
||||
.tab-content {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
.tab-close-button {
|
||||
display: none !important;
|
||||
}
|
||||
.tabbrowser-tab[selected] {
|
||||
& .tab-icon-image,
|
||||
.tab-icon-stack {
|
||||
display: none !important;
|
||||
}
|
||||
& .tab-content {
|
||||
justify-content: space-around !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.tab-close-button {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container::after {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 45%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: hsl(255, 10%, 100%);
|
||||
}
|
||||
|
||||
slot {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
box.scrollbox-clip scrollbox slot {
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.menupopup-arrowscrollbox > slot:nth-child(1) {
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
/* Other UI Elements */
|
||||
#zen-current-workspace-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels {
|
||||
padding-left: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
#appcontent * {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-icons-wrapper {
|
||||
width: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Height Adjustments */
|
||||
#vertical-pinned-tabs-container,
|
||||
#zen-essentials-container,
|
||||
#tabbrowser-arrowscrollbox {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-gradient-generator {
|
||||
min-width: 390px !important;
|
||||
}
|
||||
|
||||
|
||||
#zen-essentials-container:not(:empty),
|
||||
#vertical-pinned-tabs-container:not(:empty),
|
||||
#tabbrowser-arrowscrollbox {
|
||||
-webkit-box-flex: 1;
|
||||
min-width: min-content;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container:not(:empty) {
|
||||
display: -webkit-box !important;
|
||||
-webkit-box-orient: horizontal;
|
||||
min-width: fit-content !important;
|
||||
width: fit-content !important;
|
||||
position: relative;
|
||||
margin-right: -1px !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container:not(:empty) .tabbrowser-tab {
|
||||
position: relative;
|
||||
display: -webkit-box !important;
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container:empty,
|
||||
#zen-essentials-container:empty {
|
||||
-webkit-box-flex: 0 !important;
|
||||
width: 0 !important;
|
||||
min-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: none !important;
|
||||
visibility: collapse !important;
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox-periphery {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
hbox#nav-bar-customization-target toolbarbutton.chromeclass-toolbar-additional:nth-of-type(1) {
|
||||
padding-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
}
|
||||
|
||||
toolbar#PersonalToolbar {
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
|
||||
.tab-context-line {
|
||||
width: 100% !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[zen-glance-tab="true"] {
|
||||
flex-basis: fit-content !important;
|
||||
max-width: 36px !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container .tabbrowser-tab[zen-glance-tab="true"] {
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tabbrowser-tab[zen-glance-tab="true"] {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target toolbarbutton,
|
||||
#TabsToolbar-customization-target toolbarpaletteitem {
|
||||
-webkit-box-flex: 0 !important;
|
||||
min-width: min-content;
|
||||
width: auto !important;
|
||||
|
||||
.toolbarbutton-text {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@media (-moz-bool-pref: 'zen.tabs.vertical') {
|
||||
#tabbrowser-tabs,
|
||||
#TabsToolbar,
|
||||
#titlebar,
|
||||
@@ -216,7 +215,21 @@
|
||||
}
|
||||
|
||||
& .tabbrowser-tab {
|
||||
animation: zen-slide-in 0.2s ease-in-out;
|
||||
animation: none;
|
||||
transition: none;
|
||||
&[fadein='true']:not([zen-essential='true']) {
|
||||
#tabbrowser-tabs[zen-workspace-animation='previous'] & {
|
||||
animation: zen-slide-in-reverse 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[zen-workspace-animation='next'] & {
|
||||
animation: zen-slide-in 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&[pinned] {
|
||||
animation-delay: .03s !important;
|
||||
}
|
||||
}
|
||||
|
||||
max-width: unset;
|
||||
padding: 0 !important;
|
||||
@@ -299,6 +312,11 @@
|
||||
&::part(scrollbox) {
|
||||
gap: 0px !important;
|
||||
}
|
||||
|
||||
&::part(overflow-start-indicator),
|
||||
&::part(overflow-end-indicator) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container {
|
||||
@@ -322,12 +340,13 @@
|
||||
}
|
||||
|
||||
/* Mark: toolbox as expanded */
|
||||
#navigator-toolbox {
|
||||
#navigator-toolbox[zen-sidebar-expanded='true'] {
|
||||
--zen-toolbox-min-width: fit-content;
|
||||
--tab-icon-end-margin: 8.5px;
|
||||
padding: var(--zen-toolbox-padding);
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
z-index: 1;
|
||||
|
||||
& #titlebar {
|
||||
min-width: 150px;
|
||||
@@ -344,16 +363,13 @@
|
||||
margin-left: var(--zen-toolbox-padding);
|
||||
width: calc(100% - var(--zen-toolbox-padding));
|
||||
& .urlbar-input-container {
|
||||
padding-left: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
:root[zen-right-side='true'] & {
|
||||
margin-left: 0;
|
||||
margin-right: var(--zen-toolbox-padding);
|
||||
|
||||
& .urlbar-input-container {
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -479,6 +495,7 @@
|
||||
&:is(:hover, [visuallyselected]) .tab-close-button {
|
||||
display: block;
|
||||
--tab-inline-padding: 0; /* Avoid weird padding */
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.tab-throbber,
|
||||
@@ -493,6 +510,146 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Mark: toolbox as collapsed */
|
||||
#navigator-toolbox:not([zen-sidebar-expanded='true']) {
|
||||
--tab-min-width: 36px !important;
|
||||
/* Important: When changin this value, make sure expand on hover doesn't break! */
|
||||
--zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
|
||||
--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-current-workspace-indicator-name,
|
||||
& .toolbarbutton-text {
|
||||
display: none !important;
|
||||
}
|
||||
& #zen-current-workspace-indicator {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: .4;
|
||||
}
|
||||
& #zen-essentials-container {
|
||||
justify-content: center;
|
||||
}
|
||||
& #vertical-tabs-newtab-button {
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
:root[customizing] & #zen-sidebar-icons-wrapper {
|
||||
min-width: unset !important;
|
||||
}
|
||||
& #zen-sidebar-icons-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: var(--zen-element-separation);
|
||||
align-items: center;
|
||||
}
|
||||
:root:has(&) #zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
& #tabbrowser-arrowscrollbox-periphery {
|
||||
& > toolbarbutton {
|
||||
margin: 0 auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
&::before {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
& #EssentialsToolbar {
|
||||
display: none !important;
|
||||
}
|
||||
& #essentials-accordion-header {
|
||||
display: none !important;
|
||||
}
|
||||
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
|
||||
position: relative;
|
||||
& .tabbrowser-tab {
|
||||
max-width: var(--tab-min-width);
|
||||
}
|
||||
}
|
||||
& #TabsToolbar-customization-target {
|
||||
padding-bottom: var(--zen-toolbox-padding);
|
||||
&::after {
|
||||
bottom: -1px !important;
|
||||
}
|
||||
}
|
||||
& #tabbrowser-tabs {
|
||||
margin-top: -2px;
|
||||
& .tabbrowser-tab {
|
||||
margin: 0 auto;
|
||||
& .tab-background {
|
||||
margin-inline: auto !important;
|
||||
&:is([selected], [multiselected]) {
|
||||
box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
|
||||
|
||||
@media not (prefers-color-scheme: dark) {
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .tab-reset-button {
|
||||
display: none !important;
|
||||
}
|
||||
& .tab-content {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
& .tab-label-container {
|
||||
display: none !important;
|
||||
}
|
||||
& .tab-icon-image,
|
||||
& .tab-icon-pending {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
/* Hide glances */
|
||||
& .tabbrowser-tab {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
|
||||
& .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
|
||||
display: none !important;
|
||||
:is(
|
||||
:root[uidensity='compact'],
|
||||
#tabbrowser-tabs[secondarytext-unsupported],
|
||||
:root:not([uidensity='compact']) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
|
||||
)
|
||||
.tab-icon-stack[indicator-replaces-favicon]
|
||||
> :not(&),
|
||||
:root:not([uidensity='compact'])
|
||||
#tabbrowser-tabs:not([secondarytext-unsupported])
|
||||
.tabbrowser-tab:not(:hover)
|
||||
&[indicator-replaces-favicon] {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .tab-throbber,
|
||||
& .tab-icon-pending,
|
||||
& .tab-icon-image,
|
||||
& .tab-sharing-icon-overlay,
|
||||
& .tab-icon-overlay {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
& #zen-workspaces-button {
|
||||
flex-direction: column;
|
||||
&:not([as-button='true']) {
|
||||
& toolbarbutton {
|
||||
&[active='true']::after {
|
||||
bottom: 50% !important;
|
||||
transform: translateY(50%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mark: Separator styling */
|
||||
#zen-sidebar-splitter {
|
||||
opacity: 0;
|
||||
@@ -683,7 +840,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Mark: Essentials Toolbar */
|
||||
#zen-essentials-container {
|
||||
@@ -711,8 +868,8 @@
|
||||
border-radius: var(--border-radius-medium);
|
||||
|
||||
&:not([selected]) .tab-background {
|
||||
background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
|
||||
box-shadow: none;
|
||||
background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* Here, we contain all the theme related variables, for example theme
|
||||
/* Here, we contain all the theme related variables, for example theme
|
||||
* colors, border radius, etc.
|
||||
* We have `--zen-border-radius` and `--zen-primary-color` as variables.
|
||||
*/
|
||||
@@ -12,7 +12,11 @@
|
||||
|
||||
/* Default values */
|
||||
--zen-border-radius: 7px;
|
||||
--zen-primary-color: #4a90e2;
|
||||
--zen-primary-color: #ffb787;
|
||||
|
||||
--zen-branding-bg-dark: #202020;
|
||||
--zen-branding-bg: light-dark(#F2F0E3, var(--zen-branding-bg-dark));
|
||||
--zen-branding-bg-reverse: light-dark(var(--zen-branding-bg-dark), #F2F0E3);
|
||||
|
||||
/** Zen colors are generated automatically from the primary color */
|
||||
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
|
||||
@@ -20,7 +24,7 @@
|
||||
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 2%, white 98%);
|
||||
|
||||
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
|
||||
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
|
||||
--zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
|
||||
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
|
||||
|
||||
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
|
||||
@@ -30,19 +34,10 @@
|
||||
|
||||
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
|
||||
|
||||
--in-content-primary-button-background: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 85%, black 15%)
|
||||
) !important;
|
||||
--in-content-primary-button-background-hover: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
|
||||
) !important;
|
||||
--in-content-primary-button-background-active: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 50%, black 50%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 80%, rgba(255,255,255,.2) 20%)
|
||||
) !important;
|
||||
--in-content-primary-button-text-color: light-dark(white, black) !important;
|
||||
--in-content-primary-button-background: color-mix(in srgb, var(--zen-primary-color) 10%, var(--zen-branding-bg-reverse) 90%) !important;
|
||||
--in-content-primary-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
|
||||
--in-content-primary-button-background-active: color-mix(in srgb, var(--zen-primary-color) 7%, var(--zen-branding-bg-reverse) 50%) !important;
|
||||
--in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
|
||||
--in-content-primary-button-border-color: transparent !important;
|
||||
--in-content-primary-button-border-hover: transparent !important;
|
||||
--in-content-primary-button-border-active: var(--zen-colors-border) !important;
|
||||
@@ -51,18 +46,14 @@
|
||||
--in-content-accent-color: var(--zen-colors-primary) !important;
|
||||
|
||||
/* This is like the secondary button */
|
||||
--in-content-button-background: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%)
|
||||
) !important;
|
||||
--in-content-button-background-hover: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 10%, rgb(255, 255, 255) 90%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
|
||||
) !important;
|
||||
--in-content-button-background: transparent !important;
|
||||
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
|
||||
--in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
|
||||
--in-content-button-text-color-hover: var(--zen-branding-bg) !important;
|
||||
--button-bgcolor: var(--in-content-button-background) !important;
|
||||
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
|
||||
--button-hover-color: var(--in-content-button-text-color-hover) !important;
|
||||
--focus-outline-color: var(--button-bgcolor) !important;
|
||||
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
|
||||
|
||||
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
|
||||
--toolbarbutton-icon-fill: light-dark(rgb(57, 57, 58), rgb(251, 251, 254)) !important;
|
||||
@@ -74,6 +65,7 @@
|
||||
|
||||
--button-background-color: var(--in-content-button-background) !important;
|
||||
--button-background-color-hover: var(--in-content-button-background-hover) !important;
|
||||
--button-text-color-hover: var(--in-content-button-text-color-hover) !important;
|
||||
--button-background-color-active: var(--in-content-primary-button-background-active) !important;
|
||||
|
||||
--color-accent-primary: var(--button-primary-bgcolor) !important;
|
||||
@@ -91,16 +83,18 @@
|
||||
--zen-toolbar-button-inner-padding: 6px;
|
||||
--toolbarbutton-outer-padding: 4px;
|
||||
|
||||
--toolbarbutton-hover-background: color-mix(in srgb, var(--zen-branding-bg-reverse) 10%, transparent 90%);
|
||||
|
||||
/* Other colors */
|
||||
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
|
||||
--urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
|
||||
--toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
|
||||
--zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
|
||||
--urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
|
||||
|
||||
/* XUL */
|
||||
--zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
|
||||
--zen-main-browser-background-toolbar: var(--zen-main-browser-background);
|
||||
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
|
||||
|
||||
--zen-appcontent-border: 1px solid var(--zen-colors-border);
|
||||
--zen-panel-radius: var(--zen-border-radius);
|
||||
@@ -127,8 +121,8 @@
|
||||
|
||||
--input-bgcolor: var(--zen-colors-tertiary) !important;
|
||||
--input-border-color: var(--zen-input-border-color) !important;
|
||||
--zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary));
|
||||
--zen-themed-toolbar-bg-transparent: light-dark(#f7f7f7, var(--zen-colors-tertiary));
|
||||
--zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
|
||||
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
|
||||
|
||||
@supports (-moz-osx-font-smoothing: auto) {
|
||||
--zen-themed-toolbar-bg-transparency: 0.05;
|
||||
@@ -142,8 +136,8 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host(:is(.anonymous-content-host, notification-message)),
|
||||
:root {
|
||||
--zen-in-content-dialog-background: rgb(23, 23, 23);
|
||||
--zen-dark-color-mix-base: rgb(21, 21, 21);
|
||||
--zen-in-content-dialog-background: var(--zen-branding-bg);
|
||||
--zen-dark-color-mix-base: var(--zen-branding-bg);
|
||||
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%);
|
||||
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
|
||||
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
|
||||
|
||||
@@ -126,6 +126,11 @@
|
||||
}
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
#urlbar[breakout-extend='true'] {
|
||||
top: 0px !important;
|
||||
width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline) * 4);
|
||||
}
|
||||
|
||||
#notification-popup-box {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
Reference in New Issue
Block a user