mirror of
https://github.com/zen-browser/desktop.git
synced 2026-08-29 18:01:31 +00:00
Merge branch 'zen-browser:dev' into adds-search-to-icons
This commit is contained in:
Studio Movie Girl
@@ -2,7 +2,6 @@
|
||||
const lazy = {};
|
||||
var ZenStartup = {
|
||||
init() {
|
||||
this.logHeader();
|
||||
this.openWatermark();
|
||||
window.SessionStore.promiseInitialized.then(() => {
|
||||
this._changeSidebarLocation();
|
||||
@@ -27,9 +26,12 @@
|
||||
}
|
||||
|
||||
// Fix notification deck
|
||||
document
|
||||
.getElementById('zen-appcontent-navbar-container')
|
||||
.appendChild(document.getElementById('tab-notification-deck-template'));
|
||||
const deckTemplate = document.getElementById('tab-notification-deck-template');
|
||||
if (deckTemplate) {
|
||||
document
|
||||
.getElementById('zen-appcontent-navbar-container')
|
||||
.appendChild(deckTemplate);
|
||||
}
|
||||
|
||||
// Disable smooth scroll
|
||||
gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
|
||||
@@ -104,21 +106,6 @@
|
||||
gURLBar._initPasteAndGo();
|
||||
gURLBar._initStripOnShare();
|
||||
},
|
||||
|
||||
logHeader() {
|
||||
console.info(`
|
||||
|
||||
Welcome to Zen Browser!
|
||||
|
||||
If you are seeing this message, it means that you have successfully opened Zen's developer console.
|
||||
Here you can see all the logs and errors that Zen is generating.
|
||||
|
||||
If you have any questions or need help, please contact us in any media in https://zen-browser.app/
|
||||
|
||||
Note: This developer console is not the same as the browser console, it has access to Zen's internal functions and variables, including your passwords and other sensitive information. Please do not paste any code here unless you know what you are doing.
|
||||
|
||||
`);
|
||||
},
|
||||
};
|
||||
|
||||
ZenStartup.init();
|
||||
|
||||
@@ -117,6 +117,8 @@ var gZenUIManager = {
|
||||
|
||||
var gZenVerticalTabsManager = {
|
||||
init() {
|
||||
this._multiWindowFeature = new ZenMultiWindowFeature();
|
||||
|
||||
ChromeUtils.defineLazyGetter(this, 'isWindowsStyledButtons', () => {
|
||||
return !(window.AppConstants.platform === 'macosx' || window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches
|
||||
|| Services.prefs.getBoolPref('zen.view.experimental-force-window-controls-left'));
|
||||
@@ -138,7 +140,7 @@ var gZenVerticalTabsManager = {
|
||||
this.initRightSideOrderContextMenu();
|
||||
|
||||
window.addEventListener('customizationstarting', this._preCustomize.bind(this));
|
||||
window.addEventListener('aftercustomization', updateEvent);
|
||||
window.addEventListener('aftercustomization', this._postCustomize.bind(this));
|
||||
|
||||
window.addEventListener('DOMContentLoaded', updateEvent, { once: true });
|
||||
|
||||
@@ -209,12 +211,22 @@ var gZenVerticalTabsManager = {
|
||||
return this.__actualWindowButtons;
|
||||
},
|
||||
|
||||
_preCustomize() {
|
||||
this._updateEvent({ forceMultipleToolbar: true });
|
||||
async _preCustomize() {
|
||||
await this._multiWindowFeature.foreachWindowAsActive(async (browser) => {
|
||||
browser.gZenVerticalTabsManager._updateEvent({ forceMultipleToolbar: true, dontRebuildAreas: true });
|
||||
});
|
||||
this.rebuildAreas();
|
||||
this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
|
||||
document.documentElement.setAttribute('zen-sidebar-expanded', 'true'); // force expanded sidebar
|
||||
},
|
||||
|
||||
_postCustomize() {
|
||||
// No need to use `await` here, because the customization is already done
|
||||
this._multiWindowFeature.foreachWindowAsActive(async (browser) => {
|
||||
browser.gZenVerticalTabsManager._updateEvent({ dontRebuildAreas: true });
|
||||
});
|
||||
},
|
||||
|
||||
initializePreferences(updateEvent) {
|
||||
XPCOMUtils.defineLazyPreferenceGetter(
|
||||
this,
|
||||
@@ -261,7 +273,7 @@ var gZenVerticalTabsManager = {
|
||||
);
|
||||
},
|
||||
|
||||
_updateEvent({ forceMultipleToolbar = false } = {}) {
|
||||
_updateEvent({ forceMultipleToolbar = false, dontRebuildAreas = false } = {}) {
|
||||
if (this._isUpdating) {
|
||||
return;
|
||||
}
|
||||
@@ -300,7 +312,7 @@ var gZenVerticalTabsManager = {
|
||||
let shouldHide = false;
|
||||
if (((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)
|
||||
|| (
|
||||
isCompactMode && isSingleToolbar && this.isWindowsStyledButtons && !isRightSide
|
||||
isCompactMode && isSingleToolbar && this.isWindowsStyledButtons
|
||||
)) && isSingleToolbar) {
|
||||
appContentNavbarContaienr.setAttribute('should-hide', 'true');
|
||||
shouldHide = true;
|
||||
@@ -314,16 +326,8 @@ var gZenVerticalTabsManager = {
|
||||
!isCompactMode
|
||||
) {
|
||||
this.navigatorToolbox.prepend(topButtons);
|
||||
// browser.prepend(this.navigatorToolbox);
|
||||
} else {
|
||||
// customizationTarget.prepend(topButtons);
|
||||
// tabboxWrapper.prepend(this.navigatorToolbox);
|
||||
}
|
||||
|
||||
//if (!isVerticalTabs) {
|
||||
// document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
|
||||
//}
|
||||
|
||||
let windowButtons = this.actualWindowButtons;
|
||||
let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
|
||||
const navBar = document.getElementById('nav-bar');
|
||||
@@ -365,7 +369,9 @@ var gZenVerticalTabsManager = {
|
||||
document.documentElement.removeAttribute("zen-single-toolbar");
|
||||
navBar.appendChild(document.getElementById('PanelUI-button'));
|
||||
this._toolbarOriginalParent.prepend(navBar);
|
||||
CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
|
||||
if (!dontRebuildAreas) {
|
||||
this.rebuildAreas();
|
||||
}
|
||||
}
|
||||
|
||||
if (isCompactMode) {
|
||||
@@ -415,7 +421,7 @@ var gZenVerticalTabsManager = {
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldHide && !isCompactMode) {
|
||||
if (shouldHide) {
|
||||
appContentNavbarContaienr.append(windowButtons);
|
||||
}
|
||||
|
||||
@@ -429,6 +435,10 @@ var gZenVerticalTabsManager = {
|
||||
this._isUpdating = false;
|
||||
},
|
||||
|
||||
rebuildAreas() {
|
||||
CustomizableUI.zenInternalCU._rebuildRegisteredAreas(/* zenDontRebuildCollapsed */ true);
|
||||
},
|
||||
|
||||
_updateMaxWidth() {
|
||||
const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
|
||||
const toolbox = document.getElementById('navigator-toolbox');
|
||||
|
||||
@@ -37,8 +37,6 @@
|
||||
<script src="chrome://browser/content/zen-components/ZenWorkspaces.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenPinnedTabsStorage.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenPinnedTabManager.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenWorkspacesStorage.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenWorkspacesSync.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenGradientGenerator.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
|
||||
<script src="chrome://browser/content/zen-components/ZenProfileDialogUI.mjs" />
|
||||
|
||||
@@ -4,4 +4,6 @@
|
||||
<script type="text/javascript">
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCommonUtils.mjs", this);
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs", this);
|
||||
</script>
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspacesSync.mjs", this);
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspacesStorage.mjs", this);
|
||||
</script>
|
||||
|
||||
@@ -18,13 +18,13 @@
|
||||
:root[zen-no-padding='true'] &:not([zen-split="true"]) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
|
||||
#tabbrowser-tabpanels {
|
||||
mix-blend-mode: multiply;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
|
||||
#tabbrowser-tabpanels {
|
||||
mix-blend-mode: multiply;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,6 +83,7 @@
|
||||
|
||||
#zen-appcontent-wrapper {
|
||||
max-width: 100%;
|
||||
min-width: 1px;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -12,11 +12,20 @@
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-pref: 'zen.view.use-single-toolbar') {
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
|
||||
margin-left: var(--zen-sidebar-web-panel-spacing) !important;
|
||||
}
|
||||
|
||||
#zen-tabbox-wrapper {
|
||||
/* Remove extra 1px of margine we have to add to the tabbox */
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-wrapper {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
|
||||
& #tabbrowser-tabbox {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-sidebar-top-buttons-customization-target {
|
||||
@@ -28,36 +37,41 @@
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-max-width: 54px !important;
|
||||
--zen-compact-float: calc(var(--zen-element-separation) - 1px);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: transform 0.25s ease, opacity 0.1s ease-in-out;
|
||||
top: 0;
|
||||
bottom: var(--zen-element-separation);
|
||||
opacity: 0;
|
||||
padding-left: var(--zen-compact-float) !important;
|
||||
padding-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
--zen-toolbox-max-width: 64px !important;
|
||||
--zen-compact-float: var(--zen-element-separation);
|
||||
|
||||
:root[zen-single-toolbar='true'] & {
|
||||
top: var(--zen-element-separation);
|
||||
&:not([animate='true']) {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: left 0.25s ease, right 0.25s ease, opacity 1.5s ease;
|
||||
top: 0;
|
||||
bottom: var(--zen-element-separation);
|
||||
opacity: 0;
|
||||
padding: 0 var(--zen-compact-float) !important;
|
||||
|
||||
& #nav-bar {
|
||||
margin-left: calc(var(--zen-toolbox-padding) / 2) !important;
|
||||
:root[zen-single-toolbar='true'] & {
|
||||
top: var(--zen-element-separation);
|
||||
|
||||
& #nav-bar {
|
||||
margin-left: calc(var(--zen-toolbox-padding) / 2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #urlbar[open] {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true']) #navigator-toolbox {
|
||||
right: calc(100% - var(--zen-element-separation));
|
||||
left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
||||
}
|
||||
|
||||
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
|
||||
* we need to adjust the top-padding of the toolbox to account for the
|
||||
* extra toolbar height. */
|
||||
@media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) #navigator-toolbox {
|
||||
&:not([zen-single-toolbar='true']) #navigator-toolbox:not([animate='true']) {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
}
|
||||
@@ -65,9 +79,10 @@
|
||||
&[zen-right-side='true'] {
|
||||
& #navigator-toolbox {
|
||||
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
|
||||
padding-left: unset !important;
|
||||
padding-right: var(--zen-compact-float) !important;
|
||||
left: calc(100% - var(--zen-element-separation));
|
||||
|
||||
&:not([animate='true']) {
|
||||
right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
||||
}
|
||||
}
|
||||
|
||||
& .browserSidebarContainer {
|
||||
@@ -76,7 +91,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
#navigator-toolbox:not([animate='true']) #titlebar {
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: calc(var(--zen-border-radius) - 2px);
|
||||
padding: var(--zen-toolbox-padding) !important;
|
||||
@@ -99,19 +114,21 @@
|
||||
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox[zen-has-hover],
|
||||
#navigator-toolbox:focus-within,
|
||||
#navigator-toolbox[zen-user-show],
|
||||
#navigator-toolbox[flash-popup],
|
||||
#navigator-toolbox[has-popup-menu],
|
||||
#navigator-toolbox[movingtab],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) {
|
||||
opacity: 1;
|
||||
#navigator-toolbox:has(*:is([open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)) {
|
||||
&:not([animate='true']) {
|
||||
transition: left 0.25s ease, right 0.25s ease;
|
||||
opacity: 1;
|
||||
|
||||
transform: translateX(calc(100% - var(--zen-element-separation) - 1px));
|
||||
:root[zen-right-side='true'] & {
|
||||
transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
|
||||
left: -1px;
|
||||
:root[zen-right-side='true'] & {
|
||||
right: -1px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -156,7 +173,6 @@
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
background: var(--zen-dialog-background);
|
||||
padding-left: var(--zen-toolbox-padding) !important;
|
||||
|
||||
max-height: var(--zen-toolbar-height);
|
||||
overflow: hidden;
|
||||
@@ -170,11 +186,6 @@
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
:root[zen-window-buttons-reversed='true'] & {
|
||||
padding-left: 0 !important;
|
||||
padding-right: var(--zen-toolbox-padding) !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
|
||||
background-attachment: fixed;
|
||||
backdrop-filter: blur(5px);
|
||||
@@ -199,6 +210,10 @@
|
||||
|
||||
& #urlbar {
|
||||
transform: translateY(0);
|
||||
|
||||
&[open]:not([zen-floating-urlbar='true']) {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
:root[zen-right-side='true'] & {
|
||||
margin-right: 0;
|
||||
margin-left: calc(-1 * var(--zen-split-column-gap));
|
||||
margin-left: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -281,11 +281,17 @@
|
||||
animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
|
||||
}
|
||||
|
||||
:root:not([zen-right-side='true']) {
|
||||
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel:is([hidden='true'], [pinned='true']))) {
|
||||
margin-left: 0 !important;
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([hidden='true'])) {
|
||||
:root:not([zen-right-side='true']) & {
|
||||
margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
|
||||
:root[zen-right-side='true'] & {
|
||||
margin-left: 0 !important;
|
||||
margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** UNPINNED **/
|
||||
|
||||
@@ -2,28 +2,32 @@ height: var(--zen-toolbar-height);
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
|
||||
& {
|
||||
transition: height 0.2s ease, opacity 0.2s ease-out;
|
||||
transition-delay: 0.05s;
|
||||
transition: height 0.15s ease, opacity 0.1s ease-out;
|
||||
transition-delay: 0.2s;
|
||||
|
||||
& > * {
|
||||
transition: transform 0.2s ease-out;
|
||||
transition: opacity 0.2s ease-out;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
|
||||
transition-delay: 0.2s;
|
||||
height: var(--zen-element-separation);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
& > * {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root[inDOMFullscreen='true'] & {
|
||||
max-height: 0;
|
||||
min-height: unset !important;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@media (-moz-bool-pref: 'zen.view.experimental-no-window-controls') {
|
||||
&:has(#PersonalToolbar[collapsed='true']) {
|
||||
max-height: 0 !important;
|
||||
overflow: hidden;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
|
||||
& #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;
|
||||
}
|
||||
@@ -166,6 +166,13 @@
|
||||
&[should-hide='true'] {
|
||||
%include vertical-tabs-topbar.inc.css
|
||||
}
|
||||
|
||||
:root[inDOMFullscreen='true'] & {
|
||||
max-height: 0 !important;
|
||||
min-height: unset !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,14 +231,14 @@
|
||||
}
|
||||
|
||||
& .tabbrowser-tab {
|
||||
transition: scale 0.1s ease-in-out;
|
||||
transition: scale 0.07s ease;
|
||||
&[fadein='true']:not([zen-essential='true']) {
|
||||
#tabbrowser-tabs[zen-workspace-animation='previous'] & {
|
||||
animation: zen-slide-in 0.2s ease-in-out;
|
||||
animation: zen-slide-in 0.2s ease;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[zen-workspace-animation='next'] & {
|
||||
animation: zen-slide-in-reverse 0.2s ease-in-out;
|
||||
animation: zen-slide-in-reverse 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -372,7 +379,6 @@
|
||||
|
||||
:root[zen-single-toolbar='true'] & {
|
||||
margin-left: var(--zen-toolbox-padding);
|
||||
width: calc(100% - var(--zen-toolbox-padding));
|
||||
& #urlbar:not([breakout-extend='true']) .urlbar-input-container {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
@@ -380,7 +386,6 @@
|
||||
|
||||
:root[zen-right-side='true'] & {
|
||||
margin-left: 0;
|
||||
margin-right: var(--zen-toolbox-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -681,7 +686,8 @@
|
||||
/* Mark: Separator styling */
|
||||
#zen-sidebar-splitter {
|
||||
opacity: 0;
|
||||
width: var(--zen-toolbox-padding);
|
||||
max-width: var(--zen-toolbox-padding) !important;
|
||||
min-width: var(--zen-toolbox-padding) !important;
|
||||
height: 100%;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
background: var(--zen-colors-border);
|
||||
@@ -939,7 +945,7 @@
|
||||
@media not (-moz-bool-pref: 'zen.view.compact') {
|
||||
:root[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
|
||||
& #navigator-toolbox {
|
||||
padding-top: var(--zen-toolbar-height);
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
|
||||
& .titlebar-buttonbox-container {
|
||||
@@ -957,11 +963,13 @@
|
||||
& #zen-appcontent-navbar-container {
|
||||
padding-left: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
%include vertical-tabs-topbuttons-fix.css
|
||||
}
|
||||
|
||||
:root:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
|
||||
& #navigator-toolbox {
|
||||
padding-top: var(--zen-toolbar-height);
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
|
||||
& .titlebar-buttonbox-container {
|
||||
@@ -979,5 +987,7 @@
|
||||
& #zen-appcontent-navbar-container {
|
||||
padding-right: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
%include vertical-tabs-topbuttons-fix.css
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
/* Branding */
|
||||
--zen-branding-dark: #202020;
|
||||
--zen-branding-coral: #F76F53;
|
||||
--zen-branding-paper: #F2F0E3;
|
||||
--zen-branding-paper: #ebebeb;
|
||||
|
||||
--zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark));
|
||||
--zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper));
|
||||
@@ -76,6 +76,9 @@
|
||||
--color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
|
||||
--color-accent-primary-active: var(--button-primary-active-bgcolor) !important;
|
||||
|
||||
--link-color: var(--zen-branding-bg-reverse) !important;
|
||||
--link-color-hover: var(--zen-branding-bg-reverse) !important;
|
||||
|
||||
--in-content-page-background: var(--zen-colors-tertiary) !important;
|
||||
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
|
||||
|
||||
|
||||
@@ -124,6 +124,10 @@
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
#identity-permission-box > *:not(#permissions-granted-icon) {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#urlbar[open] :is(#tracking-protection-icon-container, .urlbar-page-action),
|
||||
#urlbar:hover :is(#tracking-protection-icon-container, .urlbar-page-action),
|
||||
.urlbar-page-action[open],
|
||||
@@ -134,7 +138,7 @@
|
||||
|
||||
#identity-permission-box:not([open]),
|
||||
#notification-popup-box:not([open]) {
|
||||
margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
|
||||
margin-inline-start: calc(-10px - 2 * var(--urlbar-icon-padding));
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -302,8 +306,18 @@ button.popup-notification-dropmarker {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:root:not([zen-single-toolbar='true']) #nav-bar {
|
||||
margin-bottom: -1px;
|
||||
:root:not([zen-single-toolbar='true']) {
|
||||
& #nav-bar {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
&[zen-right-side='true']:not([zen-window-buttons-reversed='true']) #nav-bar {
|
||||
margin-inline-start: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true'])[zen-window-buttons-reversed='true'] #nav-bar {
|
||||
margin-inline-end: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
/* Other small tweaks */
|
||||
@@ -338,20 +352,31 @@ button.popup-notification-dropmarker {
|
||||
}
|
||||
|
||||
#urlbar[open] {
|
||||
--urlbar-margin-inline: 5px !important;
|
||||
|
||||
& #identity-box {
|
||||
margin-right: var(--urlbar-margin-inline);
|
||||
}
|
||||
|
||||
& #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;
|
||||
background-color: light-dark(rgb(247, 247, 247), var(--zen-branding-bg)) !important;
|
||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.05), 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;
|
||||
}
|
||||
}
|
||||
|
||||
:root[zen-single-toolbar='true'] #urlbar[open] {
|
||||
min-width: 30vw;
|
||||
:root[zen-single-toolbar='true'] {
|
||||
#urlbar[open] {
|
||||
min-width: 30vw;
|
||||
}
|
||||
|
||||
&[zen-right-side='true'] #urlbar[open]:not([zen-floating-urlbar='true']) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#urlbar[open][zen-floating-urlbar='true'] {
|
||||
@@ -361,18 +386,17 @@ button.popup-notification-dropmarker {
|
||||
font-size: 1.1em;
|
||||
--urlbar-container-height: 55px !important;
|
||||
--urlbar-margin-inline: 10px !important;
|
||||
|
||||
& #identity-box {
|
||||
margin-right: var(--urlbar-margin-inline);
|
||||
}
|
||||
|
||||
:root[zen-right-side='true'] & {
|
||||
right: 0;
|
||||
}
|
||||
position: absolute;
|
||||
|
||||
top: calc(var(--zen-toolbar-height) * 2) !important;
|
||||
left: 28vw;
|
||||
|
||||
:root[zen-right-side='true'] & {
|
||||
right: 28vw !important;
|
||||
}
|
||||
|
||||
:root:not([zen-right-side='true']) & {
|
||||
left: 28vw !important;
|
||||
}
|
||||
|
||||
#urlbar-container:has(&) {
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -437,7 +437,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: 'zen.workspaces.show-workspace-indicator') {
|
||||
@media (not (-moz-bool-pref: 'zen.workspaces.show-workspace-indicator')) or (not (-moz-bool-pref: 'zen.workspaces.enabled')) {
|
||||
#zen-current-workspace-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user