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

refactor(common, compact-mode, folders, fonts, glance, images, kbs, media, mods, split-view, tabs, tests, workspaces, vendor, welcome): closes #7628 - Refactor zen components file structure for easier understanding

Browse Source
This commit is contained in:
Mr. M
2025-04-15 14:03:55 +02:00
parent c8d616e657
commit 1135744520
95 changed files with 155 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/browser/base/content/ZenCustomizableUI.sys.mjs
View File

@@ -1,129 +0,0 @@
import { AppConstants } from 'resource://gre/modules/AppConstants.sys.mjs';
export var ZenCustomizableUI = new (class {
constructor() {}
TYPE_TOOLBAR = 'toolbar';
defaultSidebarIcons = ['preferences-button', 'zen-workspaces-button', 'downloads-button'];
startup(CustomizableUIInternal) {
CustomizableUIInternal.registerArea(
'zen-sidebar-top-buttons',
{
type: this.TYPE_TOOLBAR,
defaultPlacements: [],
defaultCollapsed: null,
overflowable: true,
},
true
);
CustomizableUIInternal.registerArea(
'zen-sidebar-bottom-buttons',
{
type: this.TYPE_TOOLBAR,
defaultPlacements: this.defaultSidebarIcons,
defaultCollapsed: null,
},
true
);
}
// We do not have access to the window object here
init(window) {
this._addSidebarButtons(window);
this._hideToolbarButtons(window);
}
_addSidebarButtons(window) {
const toolbox = window.document.getElementById('navigator-toolbox');
// Set a splitter to navigator-toolbox
const splitter = window.document.createXULElement('splitter');
splitter.setAttribute('id', 'zen-sidebar-splitter');
splitter.setAttribute('orient', 'horizontal');
splitter.setAttribute('resizebefore', 'sibling');
splitter.setAttribute('resizeafter', 'none');
toolbox.insertAdjacentElement('afterend', splitter);
const sidebarBox = window.MozXULElement.parseXULToFragment(`
<toolbar id="zen-sidebar-top-buttons"
fullscreentoolbar="true"
class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
brighttext="true"
data-l10n-id="tabs-toolbar"
customizable="true"
context="toolbar-context-menu"
flex="1"
skipintoolbarset="true"
customizationtarget="zen-sidebar-top-buttons-customization-target"
overflowable="true"
default-overflowbutton="nav-bar-overflow-button"
default-overflowtarget="widget-overflow-list"
default-overflowpanel="widget-overflow"
addon-webext-overflowbutton="unified-extensions-button"
addon-webext-overflowtarget="overflowed-extensions-list"
mode="icons">
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
<html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>
</hbox>
</toolbar>
`);
toolbox.prepend(sidebarBox);
new window.MutationObserver((e) => {
if (e[0].type !== 'attributes' || e[0].attributeName !== 'width') return;
this._dispatchResizeEvent(window);
}).observe(toolbox, {
attributes: true, //configure it to listen to attribute changes
});
// remove all styles except for the width, since we are xulstoring the complet style list
const width = toolbox.style.width || '180px';
toolbox.removeAttribute('style');
toolbox.style.width = width;
const newTab = window.document.getElementById('vertical-tabs-newtab-button');
newTab.classList.add('zen-sidebar-action-button');
for (let id of this.defaultSidebarIcons) {
const elem = window.document.getElementById(id);
if (!elem || elem.id === 'zen-workspaces-button') continue;
elem.setAttribute('removable', 'true');
}
this._moveWindowButtons(window);
}
_moveWindowButtons(window) {
const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container');
const toolboxIcons = window.document.getElementById('zen-sidebar-top-buttons-customization-target');
if (window.AppConstants.platform === 'macosx' || window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches) {
for (let i = 0; i < windowControls.length; i++) {
if (i === 0) {
toolboxIcons.prepend(windowControls[i]);
continue;
}
windowControls[i].remove();
}
}
}
_hideToolbarButtons(window) {
const wrapper = window.document.getElementById('zen-sidebar-bottom-buttons');
const elementsToHide = ['alltabs-button', 'new-tab-button'];
for (let id of elementsToHide) {
const elem = window.document.getElementById(id);
if (elem) {
wrapper.prepend(elem);
}
}
}
_dispatchResizeEvent(window) {
window.dispatchEvent(new window.Event('resize'));
}
registerToolbarNodes(window) {
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-bottom-buttons'));
}
})();

173
src/browser/base/content/ZenStartup.mjs
View File

@@ -1,173 +0,0 @@
{
var ZenStartup = {
init() {
this.openWatermark();
this._changeSidebarLocation();
this._zenInitBrowserLayout();
this._initSearchBar();
},
_zenInitBrowserLayout() {
if (this.__hasInitBrowserLayout) return;
this.__hasInitBrowserLayout = true;
try {
console.info('ZenThemeModifier: init browser layout');
const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
const kNewContainerId = 'zen-appcontent-navbar-container';
let newContainer = document.getElementById(kNewContainerId);
for (let id of kNavbarItems) {
const node = document.getElementById(id);
console.assert(node, 'Could not find node with id: ' + id);
if (!node) continue;
newContainer.appendChild(node);
}
// Fix notification deck
const deckTemplate = document.getElementById('tab-notification-deck-template');
if (deckTemplate) {
document.getElementById('zen-appcontent-navbar-container').appendChild(deckTemplate);
}
this._initSidebarScrolling();
ZenWorkspaces.init();
gZenVerticalTabsManager.init();
gZenUIManager.init();
this._checkForWelcomePage();
document.l10n.setAttributes(document.getElementById('tabs-newtab-button'), 'tabs-toolbar-new-tab');
} catch (e) {
console.error('ZenThemeModifier: Error initializing browser layout', e);
}
if (gBrowserInit.delayedStartupFinished) {
this.delayedStartupFinished();
} else {
Services.obs.addObserver(this, 'browser-delayed-startup-finished');
}
},
observe(aSubject, aTopic) {
// This nsIObserver method allows us to defer initialization until after
// this window has finished painting and starting up.
if (aTopic == 'browser-delayed-startup-finished' && aSubject == window) {
Services.obs.removeObserver(this, 'browser-delayed-startup-finished');
this.delayedStartupFinished();
}
},
delayedStartupFinished() {
ZenWorkspaces.promiseInitialized.then(async () => {
await delayedStartupPromise;
await SessionStore.promiseAllWindowsRestored;
setTimeout(() => {
gZenCompactModeManager.init();
setTimeout(() => {
// A bit of a hack to make sure the tabs toolbar is updated.
// Just in case we didn't get the right size.
gZenUIManager.updateTabsToolbar();
}, 100);
}, 0);
this.closeWatermark();
});
},
openWatermark() {
if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
document.documentElement.removeAttribute('zen-before-loaded');
return;
}
for (let elem of document.querySelectorAll('#browser > *, #urlbar')) {
elem.style.opacity = 0;
}
},
closeWatermark() {
document.documentElement.removeAttribute('zen-before-loaded');
if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
gZenUIManager.motion
.animate(
'#browser > *, #urlbar, #tabbrowser-tabbox > *',
{
opacity: [0, 1],
},
{
delay: 0.6,
easing: 'ease-in-out',
}
)
.then(() => {
for (let elem of document.querySelectorAll('#browser > *, #urlbar, #tabbrowser-tabbox > *')) {
elem.style.removeProperty('opacity');
}
});
}
window.requestAnimationFrame(() => {
window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
});
},
_changeSidebarLocation() {
const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
const browser = document.getElementById('browser');
const toolbox = document.getElementById('navigator-toolbox');
browser.prepend(toolbox);
const sidebarPanelWrapper = document.getElementById('tabbrowser-tabbox');
for (let id of kElementsToAppend) {
const elem = document.getElementById(id);
if (elem) {
sidebarPanelWrapper.prepend(elem);
}
}
},
_initSidebarScrolling() {
// Disable smooth scroll
const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
const tabsWrapper = document.getElementById('zen-tabs-wrapper');
gBrowser.tabContainer.addEventListener('wheel', (event) => {
if (canSmoothScroll) return;
event.preventDefault(); // Prevent the smooth scroll behavior
gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
});
// Detect overflow and underflow
const observer = new ResizeObserver((_) => {
const tabContainer = gBrowser.tabContainer;
// const isVertical = tabContainer.getAttribute('orient') === 'vertical';
// let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
// NOTE: This should be contentSize > scrollClientSize, but due
// to how Gecko internally rounds in those cases, we allow for some
// minor differences (the internal Gecko layout size is 1/60th of a
// pixel, so 0.02 should cover it).
//let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
let overflowing = true; // cheatign the system, because we want to always show make the element overflowing
window.requestAnimationFrame(() => {
tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
tabContainer.arrowScrollbox.dispatchEvent(new CustomEvent(overflowing ? 'overflow' : 'underflow'));
});
});
observer.observe(tabsWrapper);
},
_initSearchBar() {
// Only focus the url bar
gURLBar.focus();
gURLBar._initCopyCutController();
gURLBar._initPasteAndGo();
gURLBar._initStripOnShare();
},
_checkForWelcomePage() {
if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false)) {
Services.prefs.setBoolPref('zen.welcome-screen.seen', true);
Services.scriptloader.loadSubScript('chrome://browser/content/zen-components/ZenWelcome.mjs', window);
}
},
};
ZenStartup.init();
}

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

@@ -1,799 +0,0 @@
var gZenUIManager = {
_popupTrackingElements: [],
_hoverPausedForExpand: false,
_hasLoadedDOM: false,
init() {
document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
XPCOMUtils.defineLazyPreferenceGetter(this, 'contentElementSeparation', 'zen.theme.content-element-separation', 0);
XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarShowDomainOnly', 'zen.urlbar.show-domain-only-in-sidebar', true);
gURLBar._zenTrimURL = this.urlbarTrim.bind(this);
ChromeUtils.defineLazyGetter(this, 'motion', () => {
return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
});
ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
return document.getElementById('zen-toast-container');
});
new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(document.getElementById('TabsToolbar'));
new ResizeObserver(
gZenCommonActions.throttle(
gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager),
this.sidebarHeightThrottle
)
).observe(document.getElementById('navigator-toolbox'));
SessionStore.promiseAllWindowsRestored.then(() => {
this._hasLoadedDOM = true;
this.updateTabsToolbar();
});
window.addEventListener('TabClose', this.onTabClose.bind(this));
this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
gZenMediaController.init();
},
updateTabsToolbar() {
// Set tabs max-height to the "toolbar-items" height
const tabs = this.tabsWrapper;
// Remove tabs so we can accurately calculate the height
// without them affecting the height of the toolbar
for (const tab of gBrowser.tabs) {
if (tab.hasAttribute('zen-essential')) {
continue;
}
tab.style.maxHeight = '0px';
}
tabs.style.flex = '1';
tabs.style.removeProperty('max-height');
const toolbarRect = tabs.getBoundingClientRect();
let height = toolbarRect.height;
for (const tab of gBrowser.tabs) {
if (tab.hasAttribute('zen-essential')) {
continue;
}
tab.style.removeProperty('max-height');
}
tabs.style.removeProperty('flex');
tabs.style.maxHeight = height + 'px';
gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
try {
gURLBar.zenUpdateLayoutBreakout();
} catch (error) {
console.error('Error updating layout breakout:', error);
}
},
get tabsWrapper() {
if (this._tabsWrapper) {
return this._tabsWrapper;
}
this._tabsWrapper = document.getElementById('zen-tabs-wrapper');
return this._tabsWrapper;
},
saveScrollbarState() {
this._scrollbarState = this.tabsWrapper.scrollTop;
},
restoreScrollbarState() {
this.tabsWrapper.scrollTop = this._scrollbarState;
},
onTabClose(event) {
this.updateTabsToolbar();
this.restoreScrollbarState();
},
openAndChangeToTab(url, options) {
if (window.ownerGlobal.parent) {
const tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options);
window.ownerGlobal.parent.gBrowser.selectedTab = tab;
return tab;
}
const tab = window.gBrowser.addTrustedTab(url, options);
window.gBrowser.selectedTab = tab;
return tab;
},
generateUuidv4() {
return Services.uuid.generateUUID().toString();
},
toogleBookmarksSidebar() {
const button = document.getElementById('zen-bookmark-button');
SidebarController.toggle('viewBookmarksSidebar', button);
},
createValidXULText(text) {
return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
},
/**
* Adds the 'has-popup-menu' attribute to the element when popup is opened on it.
* @param element element to track
*/
addPopupTrackingAttribute(element) {
this._popupTrackingElements.push(element);
},
removePopupTrackingAttribute(element) {
this._popupTrackingElements.remove(element);
},
onPopupShowing(showEvent) {
for (const el of this._popupTrackingElements) {
// target may be inside a shadow root, not directly under the element
// we also ignore menus inside panels
if (
!el.contains(showEvent.explicitOriginalTarget) ||
(showEvent.explicitOriginalTarget instanceof Element && showEvent.explicitOriginalTarget?.closest('panel'))
) {
continue;
}
document.removeEventListener('mousemove', this.__removeHasPopupAttribute);
el.setAttribute('has-popup-menu', '');
this.__currentPopup = showEvent.target;
this.__currentPopupTrackElement = el;
break;
}
},
onPopupHidden(hideEvent) {
if (!this.__currentPopup || this.__currentPopup !== hideEvent.target) {
return;
}
const element = this.__currentPopupTrackElement;
if (document.getElementById('main-window').matches(':hover')) {
element.removeAttribute('has-popup-menu');
} else {
this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu');
document.addEventListener('mousemove', this.__removeHasPopupAttribute, { once: true });
}
this.__currentPopup = null;
this.__currentPopupTrackElement = null;
},
// Section: URL bar
get newtabButtons() {
return document.querySelectorAll('#tabs-newtab-button');
},
_prevUrlbarLabel: null,
_lastSearch: '',
_clearTimeout: null,
_lastTab: null,
handleNewTab(werePassedURL, searchClipboard, where) {
const shouldOpenURLBar = gZenVerticalTabsManager._canReplaceNewTab && !werePassedURL && !searchClipboard && where === 'tab';
if (shouldOpenURLBar) {
if (this._clearTimeout) {
clearTimeout(this._clearTimeout);
}
this._lastTab = gBrowser.selectedTab;
this._lastTab._visuallySelected = false;
this._prevUrlbarLabel = gURLBar._untrimmedValue;
gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
gURLBar.setAttribute('zen-newtab', true);
for (const button of this.newtabButtons) {
button.setAttribute('in-urlbar', true);
}
document.getElementById('Browser:OpenLocation').doCommand();
gURLBar.search(this._lastSearch);
return true;
}
return false;
},
clearUrlbarData() {
this._prevUrlbarLabel = null;
this._lastSearch = '';
},
handleUrlbarClose(onSwitch) {
gURLBar._zenHandleUrlbarClose = null;
gURLBar.removeAttribute('zen-newtab');
this._lastTab._visuallySelected = true;
this._lastTab = null;
for (const button of this.newtabButtons) {
button.removeAttribute('in-urlbar');
}
if (onSwitch) {
this.clearUrlbarData();
} else {
this._lastSearch = gURLBar._untrimmedValue;
this._clearTimeout = setTimeout(() => {
this.clearUrlbarData();
}, this.urlbarWaitToClear);
}
gURLBar.setURI(this._prevUrlbarLabel, onSwitch, false, false, !onSwitch);
gURLBar.handleRevert();
if (gURLBar.focused) {
gURLBar.view.close({ elementPicked: onSwitch });
gURLBar.updateTextOverflow();
if (gBrowser.selectedTab.linkedBrowser && onSwitch) {
gURLBar.getBrowserState(gBrowser.selectedTab.linkedBrowser).urlbarFocused = false;
}
}
},
urlbarTrim(aURL) {
if (gZenVerticalTabsManager._hasSetSingleToolbar && this.urlbarShowDomainOnly) {
let url = BrowserUIUtils.removeSingleTrailingSlashFromURL(aURL);
return url.startsWith('https://') ? url.split('/')[2] : url;
}
return BrowserUIUtils.trimURL(aURL);
},
// Section: Notification messages
_createToastElement(messageId, options) {
const element = document.createXULElement('vbox');
const label = document.createXULElement('label');
document.l10n.setAttributes(label, messageId, options);
element.appendChild(label);
if (options.descriptionId) {
const description = document.createXULElement('label');
description.classList.add('description');
document.l10n.setAttributes(description, options.descriptionId, options);
element.appendChild(description);
}
element.classList.add('zen-toast');
return element;
},
async showToast(messageId, options = {}) {
const toast = this._createToastElement(messageId, options);
this._toastContainer.removeAttribute('hidden');
this._toastContainer.appendChild(toast);
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.7 });
await new Promise((resolve) => setTimeout(resolve, 3000));
await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
const toastHeight = toast.getBoundingClientRect().height;
// 5 for the separation between toasts
await this.motion.animate(toast, { marginBottom: [0, `-${toastHeight + 5}px`] }, { duration: 0.2 });
toast.remove();
if (!this._toastContainer.hasChildNodes()) {
this._toastContainer.setAttribute('hidden', 'true');
}
},
get panelUIPosition() {
return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
},
};
var gZenVerticalTabsManager = {
init() {
this._multiWindowFeature = new ZenMultiWindowFeature();
this._initWaitPromise();
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')
);
});
ChromeUtils.defineLazyGetter(this, 'hidesTabsToolbar', () => {
return (
document.documentElement.getAttribute('chromehidden').includes('toolbar') ||
document.documentElement.getAttribute('chromehidden').includes('menubar')
);
});
XPCOMUtils.defineLazyPreferenceGetter(this, '_canReplaceNewTab', 'zen.urlbar.replace-newtab', true);
var updateEvent = this._updateEvent.bind(this);
var onPrefChange = this._onPrefChange.bind(this);
this.initializePreferences(onPrefChange);
this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement;
gZenCompactModeManager.addEventListener(updateEvent);
this.initRightSideOrderContextMenu();
window.addEventListener('customizationstarting', this._preCustomize.bind(this));
window.addEventListener('aftercustomization', this._postCustomize.bind(this));
this._updateEvent();
if (!this.isWindowsStyledButtons) {
document.documentElement.setAttribute('zen-window-buttons-reversed', true);
}
this._renameTabHalt = this.renameTabHalt.bind(this);
gBrowser.tabContainer.addEventListener('dblclick', this.renameTabStart.bind(this));
},
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;
}
this._navigatorToolbox = document.getElementById('navigator-toolbox');
return this._navigatorToolbox;
},
initRightSideOrderContextMenu() {
const kConfigKey = 'zen.tabs.vertical.right-side';
const fragment = window.MozXULElement.parseXULToFragment(`
<menuitem id="zen-toolbar-context-tabs-right"
type="checkbox"
${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
data-lazy-l10n-id="zen-toolbar-context-tabs-right"
command="cmd_zenToggleTabsOnRight"
/>
`);
document.getElementById('viewToolbarsMenuSeparator').before(fragment);
},
get _topButtonsSeparatorElement() {
if (this.__topButtonsSeparatorElement) {
return this.__topButtonsSeparatorElement;
}
this.__topButtonsSeparatorElement = document.getElementById('zen-sidebar-top-buttons-separator');
return this.__topButtonsSeparatorElement;
},
animateTab(aTab) {
if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM) {
return;
}
// get next visible tab
const isLastTab = () => {
const visibleTabs = gBrowser.visibleTabs;
return visibleTabs[visibleTabs.length - 1] === aTab;
};
try {
const tabSize = aTab.getBoundingClientRect().height;
const transform = `-${tabSize}px`;
gZenUIManager.motion
.animate(
aTab,
{
opacity: [0, 1],
transform: ['scale(0.95)', 'scale(1)'],
marginBottom: isLastTab() ? [] : [transform, '0px'],
},
{
duration: 0.12,
easing: 'ease-out',
}
)
.then(() => {
aTab.style.removeProperty('margin-bottom');
aTab.style.removeProperty('transform');
aTab.style.removeProperty('opacity');
});
gZenUIManager.motion
.animate(
aTab.querySelector('.tab-content'),
{
filter: ['blur(1px)', 'blur(0px)'],
},
{
duration: 0.12,
easing: 'ease-out',
}
)
.then(() => {
aTab.querySelector('.tab-stack').style.removeProperty('filter');
});
} catch (e) {
console.error(e);
}
},
get actualWindowButtons() {
// we have multiple ".titlebar-buttonbox-container" in the DOM, because of the titlebar
if (!this.__actualWindowButtons) {
this.__actualWindowButtons = !this.isWindowsStyledButtons
? document.querySelector('.titlebar-buttonbox-container') // TODO: test if it works 100% of the time
: document.querySelector('#nav-bar .titlebar-buttonbox-container');
this.__actualWindowButtons.setAttribute('overflows', 'false');
}
return this.__actualWindowButtons;
},
async _preCustomize() {
await this._multiWindowFeature.foreachWindowAsActive(async (browser) => {
browser.gZenVerticalTabsManager._updateEvent({ forCustomizableMode: 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, '_prefsVerticalTabs', 'zen.tabs.vertical', true, updateEvent);
XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsRightSide', 'zen.tabs.vertical.right-side', false, updateEvent);
XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsUseSingleToolbar', 'zen.view.use-single-toolbar', false, updateEvent);
XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsSidebarExpanded', 'zen.view.sidebar-expanded', false, updateEvent);
XPCOMUtils.defineLazyPreferenceGetter(
this,
'_prefsSidebarExpandedMaxWidth',
'zen.view.sidebar-expanded.max-width',
300,
updateEvent
);
},
_initWaitPromise() {
this._waitPromise = new Promise((resolve) => {
this._resolveWaitPromise = resolve;
});
},
async _onPrefChange() {
this._resolveWaitPromise();
// only run if we are in the active window
await this._multiWindowFeature.foreachWindowAsActive(async (browser) => {
if (browser.gZenVerticalTabsManager._multiWindowFeature.windowIsActive(browser)) {
return;
}
await browser.gZenVerticalTabsManager._waitPromise;
browser.gZenVerticalTabsManager._updateEvent({ dontRebuildAreas: true });
browser.gZenVerticalTabsManager._initWaitPromise();
});
if (ZenMultiWindowFeature.isActiveWindow) {
this._updateEvent();
this._initWaitPromise();
}
},
recalculateURLBarHeight() {
document.getElementById('urlbar').removeAttribute('--urlbar-height');
if (!this._hasSetSingleToolbar) {
document.getElementById('urlbar').style.setProperty('--urlbar-height', '32px');
} else {
try {
gURLBar.zenUpdateLayoutBreakout();
} catch (e) {
console.error(e);
}
}
},
_updateEvent({ forCustomizableMode = false, dontRebuildAreas = false } = {}) {
if (this._isUpdating) {
return;
}
this._isUpdating = true;
try {
this._updateMaxWidth();
if (window.docShell) {
window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups();
}
const topButtons = document.getElementById('zen-sidebar-top-buttons');
const isCompactMode = gZenCompactModeManager.preference && !forCustomizableMode;
const isVerticalTabs = this._prefsVerticalTabs || forCustomizableMode;
const isSidebarExpanded = this._prefsSidebarExpanded || !isVerticalTabs;
const isRightSide = this._prefsRightSide && isVerticalTabs;
const isSingleToolbar =
((this._prefsUseSingleToolbar && isVerticalTabs && isSidebarExpanded) || !isVerticalTabs) &&
!forCustomizableMode &&
!this.hidesTabsToolbar;
const titlebar = document.getElementById('titlebar');
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
// on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute(
'orient',
isVerticalTabs && ZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
);
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (isRightSide) {
this.navigatorToolbox.setAttribute('zen-right-side', 'true');
document.documentElement.setAttribute('zen-right-side', 'true');
} else {
this.navigatorToolbox.removeAttribute('zen-right-side');
document.documentElement.removeAttribute('zen-right-side');
}
if (isSidebarExpanded) {
this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
document.documentElement.setAttribute('zen-sidebar-expanded', 'true');
gBrowser.tabContainer.setAttribute('expanded', 'true');
} else {
this.navigatorToolbox.removeAttribute('zen-sidebar-expanded');
document.documentElement.removeAttribute('zen-sidebar-expanded');
gBrowser.tabContainer.removeAttribute('expanded');
}
const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
let shouldHide = false;
if (
((!isRightSide && this.isWindowsStyledButtons) ||
(isRightSide && !this.isWindowsStyledButtons) ||
(isCompactMode && isSingleToolbar && this.isWindowsStyledButtons)) &&
isSingleToolbar
) {
appContentNavbarContaienr.setAttribute('should-hide', 'true');
shouldHide = true;
} else {
appContentNavbarContaienr.removeAttribute('should-hide');
}
// Check if the sidebar is in hover mode
if (!this.navigatorToolbox.hasAttribute('zen-right-side') && !isCompactMode) {
this.navigatorToolbox.prepend(topButtons);
}
let windowButtons = this.actualWindowButtons;
let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
const navBar = document.getElementById('nav-bar');
if (isSingleToolbar) {
this._navbarParent = navBar.parentElement;
let elements = document.querySelectorAll(
'#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container):not(toolbarspring)'
);
elements = Array.from(elements).reverse();
// Add separator if it doesn't exist
if (!this._hasSetSingleToolbar) {
buttonsTarget.append(this._topButtonsSeparatorElement);
}
for (const button of elements) {
this._topButtonsSeparatorElement.after(button);
}
buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
const panelUIButton = document.getElementById('PanelUI-button');
buttonsTarget.prepend(panelUIButton);
panelUIButton.setAttribute('overflows', 'false');
buttonsTarget.parentElement.append(document.getElementById('nav-bar-overflow-button'));
if (this.isWindowsStyledButtons && !doNotChangeWindowButtons) {
appContentNavbarContaienr.append(windowButtons);
}
if (isCompactMode) {
titlebar.prepend(navBar);
titlebar.prepend(topButtons);
} else {
titlebar.before(topButtons);
titlebar.before(navBar);
}
document.documentElement.setAttribute('zen-single-toolbar', true);
this._hasSetSingleToolbar = true;
} else if (this._hasSetSingleToolbar) {
this._hasSetSingleToolbar = false;
// Do the opposite
this._navbarParent.prepend(navBar);
const elements = document.querySelectorAll(
'#zen-sidebar-top-buttons-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional)'
);
for (const button of elements) {
document.getElementById('nav-bar-customization-target').append(button);
}
this._topButtonsSeparatorElement.remove();
document.documentElement.removeAttribute('zen-single-toolbar');
const panelUIButton = document.getElementById('PanelUI-button');
navBar.appendChild(panelUIButton);
panelUIButton.removeAttribute('overflows');
navBar.appendChild(document.getElementById('nav-bar-overflow-button'));
this._toolbarOriginalParent.prepend(navBar);
if (!dontRebuildAreas) {
this.rebuildAreas();
}
}
if (isCompactMode) {
titlebar.prepend(topButtons);
} else {
if (isSidebarExpanded) {
titlebar.before(topButtons);
} else {
titlebar.prepend(topButtons);
}
}
// Case: single toolbar, not compact mode, not right side and macos styled buttons
if (!doNotChangeWindowButtons && isSingleToolbar && !isCompactMode && !isRightSide && !this.isWindowsStyledButtons) {
topButtons.prepend(windowButtons);
}
// Case: single toolbar, compact mode, right side and windows styled buttons
if (isSingleToolbar && isCompactMode && isRightSide && this.isWindowsStyledButtons) {
topButtons.prepend(windowButtons);
}
if (doNotChangeWindowButtons) {
if (isRightSide && !isSidebarExpanded) {
navBar.appendChild(windowButtons);
} else {
topButtons.appendChild(windowButtons);
}
} else if (!isSingleToolbar && !isCompactMode) {
if (this.isWindowsStyledButtons) {
if (isRightSide) {
appContentNavbarContaienr.append(windowButtons);
} else {
navBar.append(windowButtons);
}
} else {
// not windows styled buttons
if (isRightSide || !isSidebarExpanded) {
navBar.prepend(windowButtons);
} else {
topButtons.prepend(windowButtons);
}
}
} else if (!isSingleToolbar && isCompactMode) {
navBar.appendChild(windowButtons);
} else if (isSingleToolbar && isCompactMode) {
if (!isRightSide && !this.isWindowsStyledButtons) {
topButtons.prepend(windowButtons);
}
}
if (shouldHide) {
appContentNavbarContaienr.append(windowButtons);
}
gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
this.recalculateURLBarHeight();
// Always move the splitter next to the sidebar
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
window.dispatchEvent(new Event('resize'));
if (!isCompactMode) {
gZenCompactModeManager.getAndApplySidebarWidth();
}
gZenUIManager.updateTabsToolbar();
} catch (e) {
console.error(e);
}
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');
if (!this._prefsCompactMode) {
toolbox.style.maxWidth = `${maxWidth}px`;
} else {
toolbox.style.removeProperty('maxWidth');
}
},
get expandButton() {
if (this._expandButton) {
return this._expandButton;
}
this._expandButton = document.getElementById('zen-expand-sidebar-button');
return this._expandButton;
},
toggleTabsOnRight() {
const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);
},
appendCustomizableItem(target, child, placements) {
if (
target.id === 'zen-sidebar-top-buttons-customization-target' &&
this._hasSetSingleToolbar &&
placements.includes(child.id)
) {
return this._topButtonsSeparatorElement.before(child);
}
target.appendChild(child);
},
async renameTabKeydown(event) {
if (event.key === 'Enter') {
let label = this._tabEdited.querySelector('.tab-label-container-editing');
let input = this._tabEdited.querySelector('#tab-label-input');
let newName = input.value.trim();
// Check if name is blank, reset if so
// Always remove, so we can always rename and if it's empty,
// it will reset to the original name anyway
this._tabEdited.removeAttribute('zen-has-static-label');
if (newName) {
gBrowser._setTabLabel(this._tabEdited, newName);
this._tabEdited.setAttribute('zen-has-static-label', 'true');
gZenUIManager.showToast('zen-tabs-renamed');
} else {
gBrowser.setTabTitle(this._tabEdited);
}
if (this._tabEdited.getAttribute('zen-pin-id')) {
// Update pin title in storage
await gZenPinnedTabManager.updatePinTitle(this._tabEdited, this._tabEdited.label, !!newName);
}
document.documentElement.removeAttribute('zen-renaming-tab');
// Maybe add some confetti here?!?
gZenUIManager.motion.animate(
this._tabEdited,
{
scale: [1, 0.98, 1],
},
{
duration: 0.25,
}
);
this._tabEdited.querySelector('.tab-editor-container').remove();
label.classList.remove('tab-label-container-editing');
this._tabEdited = null;
} else if (event.key === 'Escape') {
event.target.blur();
}
},
renameTabStart(event) {
if (
this._tabEdited ||
!Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') ||
!gZenVerticalTabsManager._prefsSidebarExpanded
)
return;
this._tabEdited = event.target.closest('.tabbrowser-tab');
if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) {
this._tabEdited = null;
return;
}
document.documentElement.setAttribute('zen-renaming-tab', 'true');
const label = this._tabEdited.querySelector('.tab-label-container');
label.classList.add('tab-label-container-editing');
const container = window.MozXULElement.parseXULToFragment(`
<vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
`);
label.after(container);
const containerHtml = this._tabEdited.querySelector('.tab-editor-container');
const input = document.createElement('input');
input.id = 'tab-label-input';
input.value = this._tabEdited.label;
input.addEventListener('keydown', this.renameTabKeydown.bind(this));
containerHtml.appendChild(input);
input.focus();
input.select();
input.addEventListener('blur', this._renameTabHalt);
},
renameTabHalt(event) {
if (document.activeElement === event.target || !this._tabEdited) {
return;
}
document.documentElement.removeAttribute('zen-renaming-tab');
this._tabEdited.querySelector('.tab-editor-container').remove();
const label = this._tabEdited.querySelector('.tab-label-container-editing');
label.classList.remove('tab-label-container-editing');
this._tabEdited = null;
},
};

3
src/browser/base/content/zen-assets.inc.xhtml
View File

@@ -43,7 +43,4 @@ Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/Zen
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenGlanceManager.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenMediaController.mjs", this);
// Unimportant scripts
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenRices.mjs", this);
</script>

149
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -1,82 +1,87 @@
content/browser/zenThemeModifier.js (content/zenThemeModifier.js)
content/browser/ZenStartup.mjs (content/ZenStartup.mjs)
content/browser/zen-sets.js (content/zen-sets.js)
content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs)
content/browser/ZenCustomizableUI.sys.mjs (content/ZenCustomizableUI.sys.mjs)
content/browser/zen-components/ZenUIMigration.mjs (zen-components/ZenUIMigration.mjs)
content/browser/zen-components/ZenCompactMode.mjs (zen-components/ZenCompactMode.mjs)
content/browser/zen-components/ZenViewSplitter.mjs (zen-components/ZenViewSplitter.mjs)
content/browser/zen-components/ZenThemesCommon.mjs (zen-components/ZenThemesCommon.mjs)
content/browser/zen-components/ZenWorkspaces.mjs (zen-components/ZenWorkspaces.mjs)
content/browser/zen-components/ZenWorkspacesStorage.mjs (zen-components/ZenWorkspacesStorage.mjs)
content/browser/zen-components/ZenWorkspacesSync.mjs (zen-components/ZenWorkspacesSync.mjs)
content/browser/zen-components/ZenKeyboardShortcuts.mjs (zen-components/ZenKeyboardShortcuts.mjs)
content/browser/zen-components/ZenThemesImporter.mjs (zen-components/ZenThemesImporter.mjs)
content/browser/zen-components/ZenTabUnloader.mjs (zen-components/ZenTabUnloader.mjs)
content/browser/zen-components/ZenPinnedTabsStorage.mjs (zen-components/ZenPinnedTabsStorage.mjs)
content/browser/zen-components/ZenPinnedTabManager.mjs (zen-components/ZenPinnedTabManager.mjs)
content/browser/zen-components/ZenCommonUtils.mjs (zen-components/ZenCommonUtils.mjs)
content/browser/zen-components/ZenGradientGenerator.mjs (zen-components/ZenGradientGenerator.mjs)
content/browser/zen-components/ZenGlanceManager.mjs (zen-components/ZenGlanceManager.mjs)
content/browser/zen-components/ZenFolders.mjs (zen-components/ZenFolders.mjs)
content/browser/zen-components/ZenActorsManager.mjs (zen-components/ZenActorsManager.mjs)
content/browser/zen-components/ZenRices.mjs (zen-components/ZenRices.mjs)
content/browser/zen-components/ZenEmojies.mjs (zen-components/ZenEmojies.mjs)
content/browser/zen-components/ZenWelcome.mjs (zen-components/ZenWelcome.mjs)
content/browser/zen-components/ZenMediaController.mjs (zen-components/ZenMediaController.mjs)
content/browser/zenThemeModifier.js (../../zen/common/zenThemeModifier.js)
content/browser/ZenStartup.mjs (../../zen/common/ZenStartup.mjs)
content/browser/zen-sets.js (../../zen/common/zen-sets.js)
content/browser/ZenUIManager.mjs (../../zen/common/ZenUIManager.mjs)
content/browser/zen-components/ZenActorsManager.mjs (../../zen/common/ZenActorsManager.mjs)
content/browser/zen-components/ZenEmojies.mjs (../../zen/common/ZenEmojies.mjs)
content/browser/ZenCustomizableUI.sys.mjs (../../zen/common/ZenCustomizableUI.sys.mjs)
content/browser/zen-components/ZenUIMigration.mjs (../../zen/common/ZenUIMigration.mjs)
content/browser/zen-components/ZenCommonUtils.mjs (../../zen/common/ZenCommonUtils.mjs)
content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css)
content/browser/zen-styles/zen-tabs.css (content/zen-styles/zen-tabs.css)
* content/browser/zen-styles/zen-tabs/vertical-tabs.css (content/zen-styles/zen-tabs/vertical-tabs.css)
content/browser/zen-styles/zen-tabs/horizontal-tabs.css (content/zen-styles/zen-tabs/horizontal-tabs.css)
content/browser/zen-styles/zen-browser-ui.css (content/zen-styles/zen-browser-ui.css)
content/browser/zen-styles/zen-animations.css (content/zen-styles/zen-animations.css)
content/browser/zen-styles/zen-panel-ui.css (content/zen-styles/zen-panel-ui.css)
content/browser/zen-styles/zen-single-components.css (content/zen-styles/zen-single-components.css)
content/browser/zen-styles/zen-sidebar.css (content/zen-styles/zen-sidebar.css)
content/browser/zen-styles/zen-toolbar.css (content/zen-styles/zen-toolbar.css)
content/browser/zen-styles/zen-decks.css (content/zen-styles/zen-decks.css)
content/browser/zen-styles/zen-folders.css (content/zen-styles/zen-folders.css)
content/browser/zen-styles/zen-glance.css (content/zen-styles/zen-glance.css)
content/browser/zen-styles/zen-browser-container.css (content/zen-styles/zen-browser-container.css)
content/browser/zen-styles/zen-workspaces.css (content/zen-styles/zen-workspaces.css)
content/browser/zen-styles/zen-urlbar.css (content/zen-styles/zen-urlbar.css)
content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css)
content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css)
content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css)
content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css)
content/browser/zen-styles/zen-welcome.css (content/zen-styles/zen-welcome.css)
content/browser/zen-styles/zen-media-controls.css (content/zen-styles/zen-media-controls.css)
content/browser/zen-styles/zen-theme.css (../../zen/common/styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (../../zen/common/styles/zen-buttons.css)
content/browser/zen-styles/zen-browser-ui.css (../../zen/common/styles/zen-browser-ui.css)
content/browser/zen-styles/zen-animations.css (../../zen/common/styles/zen-animations.css)
content/browser/zen-styles/zen-panel-ui.css (../../zen/common/styles/zen-panel-ui.css)
content/browser/zen-styles/zen-single-components.css (../../zen/common/styles/zen-single-components.css)
content/browser/zen-styles/zen-sidebar.css (../../zen/common/styles/zen-sidebar.css)
content/browser/zen-styles/zen-toolbar.css (../../zen/common/styles/zen-toolbar.css)
content/browser/zen-styles/zen-browser-container.css (../../zen/common/styles/zen-browser-container.css)
content/browser/zen-styles/zen-urlbar.css (../../zen/common/styles/zen-urlbar.css)
content/browser/zen-styles/zen-popup.css (../../zen/common/styles/zen-popup.css)
content/browser/zen-styles/zen-branding.css (../../zen/common/styles/zen-branding.css)
content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css)
content/browser/zen-styles/zen-panels/extensions.css (content/zen-styles/zen-panels/extensions.css)
content/browser/zen-styles/zen-panels/print.css (content/zen-styles/zen-panels/print.css)
content/browser/zen-styles/zen-panels/dialog.css (content/zen-styles/zen-panels/dialog.css)
content/browser/zen-styles/zen-panels/bookmarks.css (../../zen/common/styles/zen-panels/bookmarks.css)
content/browser/zen-styles/zen-panels/extensions.css (../../zen/common/styles/zen-panels/extensions.css)
content/browser/zen-styles/zen-panels/print.css (../../zen/common/styles/zen-panels/print.css)
content/browser/zen-styles/zen-panels/dialog.css (../../zen/common/styles/zen-panels/dialog.css)
* content/browser/zen-styles/zen-compact-mode.css (content/zen-styles/zen-compact-mode.css)
content/browser/zen-components/ZenCompactMode.mjs (../../zen/compact-mode/ZenCompactMode.mjs)
* content/browser/zen-styles/zen-compact-mode.css (../../zen/compact-mode/zen-compact-mode.css)
# Images
content/browser/zen-images/gradient.png (content/zen-images/gradient.png)
content/browser/zen-images/brand-header.svg (content/zen-images/brand-header.svg)
content/browser/zen-images/layouts/collapsed.png (content/zen-images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
content/browser/zen-images/layouts/single-toolbar.png (content/zen-images/layouts/single-toolbar.png)
content/browser/zen-images/grain-bg.png (content/zen-images/grain-bg.png)
content/browser/zen-images/note-indicator.svg (content/zen-images/note-indicator.svg)
content/browser/zen-components/ZenViewSplitter.mjs (../../zen/split-view/ZenViewSplitter.mjs)
content/browser/zen-styles/zen-decks.css (../../zen/split-view/zen-decks.css)
# Actors
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (zen-components/actors/ZenThemeMarketplaceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceChild.sys.mjs (zen-components/actors/ZenGlanceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceParent.sys.mjs (zen-components/actors/ZenGlanceParent.sys.mjs)
content/browser/zen-components/ZenThemesCommon.mjs (../../zen/mods/ZenThemesCommon.mjs)
content/browser/zen-components/ZenThemesImporter.mjs (../../zen/mods/ZenThemesImporter.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceParent.sys.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceChild.sys.mjs)
# Fonts
content/browser/zen-fonts/JunicodeVF-Italic.woff2 (content/zen-fonts/JunicodeVF-Italic.woff2)
content/browser/zen-fonts/JunicodeVF-Roman.woff2 (content/zen-fonts/JunicodeVF-Roman.woff2)
content/browser/zen-components/ZenWorkspaces.mjs (../../zen/workspaces/ZenWorkspaces.mjs)
content/browser/zen-components/ZenWorkspacesStorage.mjs (../../zen/workspaces/ZenWorkspacesStorage.mjs)
content/browser/zen-components/ZenWorkspacesSync.mjs (../../zen/workspaces/ZenWorkspacesSync.mjs)
content/browser/zen-components/ZenGradientGenerator.mjs (../../zen/workspaces/ZenGradientGenerator.mjs)
content/browser/zen-styles/zen-workspaces.css (../../zen/workspaces/zen-workspaces.css)
content/browser/zen-styles/zen-gradient-generator.css (../../zen/workspaces/zen-gradient-generator.css)
content/browser/zen-components/ZenKeyboardShortcuts.mjs (../../zen/kbs/ZenKeyboardShortcuts.mjs)
content/browser/zen-components/ZenTabUnloader.mjs (../../zen/tabs/ZenTabUnloader.mjs)
content/browser/zen-components/ZenPinnedTabsStorage.mjs (../../zen/tabs/ZenPinnedTabsStorage.mjs)
content/browser/zen-components/ZenPinnedTabManager.mjs (../../zen/tabs/ZenPinnedTabManager.mjs)
content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
* content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
content/browser/zen-styles/zen-tabs/horizontal-tabs.css (../../zen/tabs/zen-tabs/horizontal-tabs.css)
content/browser/zen-components/ZenGlanceManager.mjs (../../zen/glance/ZenGlanceManager.mjs)
content/browser/zen-styles/zen-glance.css (../../zen/glance/zen-glance.css)
content/browser/zen-components/actors/ZenGlanceChild.sys.mjs (../../zen/glance/actors/ZenGlanceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceParent.sys.mjs (../../zen/glance/actors/ZenGlanceParent.sys.mjs)
content/browser/zen-components/ZenFolders.mjs (../../zen/folders/ZenFolders.mjs)
content/browser/zen-styles/zen-folders.css (../../zen/folders/zen-folders.css)
content/browser/zen-components/ZenWelcome.mjs (../../zen/welcome/ZenWelcome.mjs)
content/browser/zen-styles/zen-welcome.css (../../zen/welcome/zen-welcome.css)
content/browser/zen-components/ZenMediaController.mjs (../../zen/media/ZenMediaController.mjs)
content/browser/zen-styles/zen-media-controls.css (../../zen/media/zen-media-controls.css)
# Images
content/browser/zen-images/gradient.png (../../zen/images/gradient.png)
content/browser/zen-images/brand-header.svg (../../zen/images/brand-header.svg)
content/browser/zen-images/layouts/collapsed.png (../../zen/images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (../../zen/images/layouts/multiple-toolbar.png)
content/browser/zen-images/layouts/single-toolbar.png (../../zen/images/layouts/single-toolbar.png)
content/browser/zen-images/grain-bg.png (../../zen/images/grain-bg.png)
content/browser/zen-images/note-indicator.svg (../../zen/images/note-indicator.svg)
# Fonts
content/browser/zen-fonts/JunicodeVF-Italic.woff2 (../../zen/fonts/JunicodeVF-Italic.woff2)
content/browser/zen-fonts/JunicodeVF-Roman.woff2 (../../zen/fonts/JunicodeVF-Roman.woff2)
# JS Vendor
content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
content/browser/zen-vendor/motion.min.mjs (content/zen-vendor/motion.min.mjs)
content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (../../zen/vendor/tsparticles.confetti.bundle.min.js)
content/browser/zen-vendor/motion.min.mjs (../../zen/vendor/motion.min.mjs)

BIN
src/browser/base/content/zen-fonts/JunicodeVF-Italic.woff2
View File

Binary file not shown.

BIN
src/browser/base/content/zen-fonts/JunicodeVF-Roman.woff2
View File

Binary file not shown.

5
src/browser/base/content/zen-glance.inc.xhtml
View File

@@ -1,5 +0,0 @@
<vbox id="zen-glance-sidebar-container" hidden="true">
<toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confirm" class="toolbarbutton-1"/>
<toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1"/>
<toolbarbutton id="zen-glance-sidebar-split" class="toolbarbutton-1"/>
</vbox>

1
src/browser/base/content/zen-images/brand-header.svg
View File

@@ -1 +0,0 @@
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_23_113)"><rect width="1920" height="1080" fill="url(#paint0_linear_23_113)"/><circle cx="960" cy="1080" r="740" stroke="#F2F0E3" stroke-width="120"/><circle cx="960" cy="1080" r="558.095" stroke="#F2F0E3" stroke-width="80"/><circle cx="960" cy="1080" r="386.19" stroke="#F2F0E3" stroke-width="60"/><circle cx="960" cy="1080" r="214.286" stroke="#F2F0E3" stroke-width="40"/></g><defs><linearGradient id="paint0_linear_23_113" x1="960" y1="0" x2="960" y2="1080" gradientUnits="userSpaceOnUse"><stop stop-color="#EA6E54"/><stop offset="1" stop-color="#D9664E"/></linearGradient><clipPath id="clip0_23_113"><rect width="1920" height="1080" fill="white"/></clipPath></defs></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 803 B

BIN
src/browser/base/content/zen-images/gradient.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
src/browser/base/content/zen-images/grain-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
src/browser/base/content/zen-images/layouts/collapsed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 513 KiB

BIN
src/browser/base/content/zen-images/layouts/multiple-toolbar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 522 KiB

BIN
src/browser/base/content/zen-images/layouts/single-toolbar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 525 KiB

100
src/browser/base/content/zen-images/note-indicator.svg
View File

@@ -1,100 +0,0 @@
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="none"/>
<style type="text/css"><![CDATA[
.note {
fill: currentColor;
transform-box: fill-box;
transform-origin: center;
}
@keyframes flyUpLeft {
from {
opacity: 1;
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
}
to {
opacity: 0;
transform: translate(-9px, -35px) scale(5) rotate(0deg);
}
}
@keyframes flyUpRight {
from {
opacity: 1;
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
}
to {
opacity: 0;
transform: translate(9px, -35px) scale(5) rotate(0deg);
}
}
@keyframes flyUpCenter {
from {
opacity: 1;
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
}
to {
opacity: 0;
transform: translate(0px, -35px) scale(5) rotate(0deg);
}
}
}*/
]]></style>
<g class="note-group">
<g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
</g>
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
</g>
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
</g>
<g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 1.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
</g>
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
</g>
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

48
src/browser/base/content/zen-media-controls.inc.xhtml
View File

@@ -1,48 +0,0 @@
<toolbar id="zen-media-controls-toolbar"
class="browser-toolbar customization-target zen-sidebar-toolbar"
context="toolbar-context-menu"
mode="icons"
hidden="true">
<toolbaritem>
<vbox id="zen-media-main-vbox">
<vbox>
<hbox id="zen-media-info-container" class="show-on-hover">
<vbox id="zen-media-info-vbox">
<label id="zen-media-title" fadein="true"/>
<label id="zen-media-artist" fadein="true"/>
</vbox>
<hbox id="zen-media-buttons-hbox">
<toolbarbutton id="zen-media-pip-button"
class="toolbarbutton-1" />
<toolbarbutton id="zen-media-close-button"
class="toolbarbutton-1" />
</hbox>
</hbox>
<hbox id="zen-media-progress-hbox" class="show-on-hover">
<label id="zen-media-current-time">0:00</label>
<html:input type="range" id="zen-media-progress-bar"
value="0" min="0" max="100" step="0.1"/>
<label id="zen-media-duration">0:00</label>
</hbox>
</vbox>
<hbox id="zen-media-controls-hbox">
<toolbarbutton id="zen-media-focus-button"
class="toolbarbutton-1" />
<toolbarbutton id="zen-media-previoustrack-button"
class="toolbarbutton-1" />
<toolbarbutton id="zen-media-playpause-button"
class="toolbarbutton-1" />
<toolbarbutton id="zen-media-nexttrack-button"
class="toolbarbutton-1" />
<toolbarbutton id="zen-media-mute-button"
class="toolbarbutton-1" />
<hbox id="media-device-buttons">
<toolbarbutton id="zen-media-mute-mic-button"
class="toolbarbutton-1" />
<toolbarbutton id="zen-media-mute-camera-button"
class="toolbarbutton-1" />
</hbox>
</hbox>
</vbox>
</toolbaritem>
</toolbar>

92
src/browser/base/content/zen-sets.js
View File

@@ -1,92 +0,0 @@
document.addEventListener(
'MozBeforeInitialXULLayout',
() => {
// <commandset id="mainCommandSet"> defined in browser-sets.inc
document
.getElementById('zenCommandSet')
// eslint-disable-next-line complexity
.addEventListener('command', (event) => {
switch (event.target.id) {
case 'cmd_zenCompactModeToggle':
gZenCompactModeManager.toggle();
break;
case 'cmd_zenCompactModeShowSidebar':
gZenCompactModeManager.toggleSidebar();
break;
case 'cmd_zenCompactModeShowToolbar':
gZenCompactModeManager.toggleToolbar();
break;
case 'cmd_zenWorkspaceForward':
ZenWorkspaces.changeWorkspaceShortcut();
break;
case 'cmd_zenWorkspaceBackward':
ZenWorkspaces.changeWorkspaceShortcut(-1);
break;
case 'cmd_zenSplitViewGrid':
gZenViewSplitter.toggleShortcut('grid');
break;
case 'cmd_zenSplitViewVertical':
gZenViewSplitter.toggleShortcut('vsep');
break;
case 'cmd_zenSplitViewHorizontal':
gZenViewSplitter.toggleShortcut('hsep');
break;
case 'cmd_zenSplitViewUnsplit':
gZenViewSplitter.toggleShortcut('unsplit');
break;
case 'cmd_zenCopyCurrentURLMarkdown':
gZenCommonActions.copyCurrentURLAsMarkdownToClipboard();
break;
case 'cmd_zenCopyCurrentURL':
gZenCommonActions.copyCurrentURLToClipboard();
break;
case 'cmd_zenPinnedTabReset':
gZenPinnedTabManager.resetPinnedTab(gBrowser.selectedTab);
break;
case 'cmd_zenPinnedTabResetNoTab':
gZenPinnedTabManager.resetPinnedTab();
break;
case 'cmd_zenToggleSidebar':
gZenVerticalTabsManager.toggleExpand();
break;
case 'cmd_zenOpenZenThemePicker':
gZenThemePicker.openThemePicker(event);
break;
case 'cmd_zenChangeWorkspaceTab':
ZenWorkspaces.changeTabWorkspace(event.sourceEvent.target.getAttribute('zen-workspace-id'));
break;
case 'cmd_zenToggleTabsOnRight':
gZenVerticalTabsManager.toggleTabsOnRight();
break;
case 'cmd_zenSplitViewLinkInNewTab':
gZenViewSplitter.splitLinkInNewTab();
break;
case 'cmd_zenReplacePinnedUrlWithCurrent':
gZenPinnedTabManager.replacePinnedUrlWithCurrent();
break;
case 'cmd_zenAddToEssentials':
gZenPinnedTabManager.addToEssentials();
break;
case 'cmd_zenRemoveFromEssentials':
gZenPinnedTabManager.removeEssentials();
break;
case 'cmd_zenUnloadTab':
gZenTabUnloader.unloadTab();
break;
case 'cmd_zenPreventUnloadTab':
gZenTabUnloader.preventUnloadTab();
break;
case 'cmd_zenIgnoreUnloadTab':
gZenTabUnloader.ignoreUnloadTab();
break;
default:
if (event.target.id.startsWith('cmd_zenWorkspaceSwitch')) {
const index = parseInt(event.target.id.replace('cmd_zenWorkspaceSwitch', ''), 10) - 1;
ZenWorkspaces.shortcutSwitchTo(index);
}
break;
}
});
},
{ once: true }
);

2
src/browser/base/content/zen-sidebar-icons.inc.xhtml
View File

@@ -1,4 +1,4 @@
#include zen-media-controls.inc.xhtml
#include ../../../zen/media/zen-media-controls.inc.xhtml
<toolbar brighttext="true"
id="zen-sidebar-bottom-buttons"
fullscreentoolbar="true"

5
src/browser/base/content/zen-splitview-overlay.inc.xhtml
View File

@@ -1,5 +0,0 @@
<hbox id="zen-splitview-overlay-wrapper" hidden="true">
<hbox id="zen-splitview-overlay">
<hbox id ="zen-splitview-dropzone"></hbox>
</hbox>
</hbox>

318
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -1,318 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
@keyframes zen-jello-animation {
0% {
transform: scale3d(0.8, 0.8, 0.8);
}
60% {
transform: scale3d(1.02, 1.02, 1.02);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes zen-jello-animation-macos {
0% {
opacity: 0;
-moz-window-transform: scale(0.3);
}
50% {
opacity: 1;
-moz-window-transform: scale(1.04);
}
100% {
opacity: 1;
-moz-window-transform: scale(1);
}
}
@keyframes zen-jello-animation-large {
0% {
transform: scale3d(0.8, 0.8, 0.8);
}
60% {
transform: scale3d(1.02, 1.02, 1.02);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes zen-theme-picker-dot-animation {
from {
transform: scale(0.8) translate(-50%, -50%);
}
50% {
transform: scale(1.2) translate(-50%, -50%);
}
to {
transform: scale(1) translate(-50%, -50%);
}
}
@keyframes zen-main-app-wrapper-animation {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes zen-jello-out-animation {
0% {
transform: scale3d(1, 1, 1);
}
60% {
transform: scale3d(1.02, 1.02, 1.02);
}
99% {
opacity: 0;
transform: scale3d(0.8, 0.8, 0.8);
}
100% {
-moz-window-transform: none;
transform: none;
}
}
@keyframes better-sidebar-pinned-hide {
0% {
opacity: 1;
transform: scale(1) rotateX(0deg);
}
100% {
transform: scale(0.99) rotateX(-5deg);
opacity: 0;
}
}
@keyframes better-sidebar-pinned-show {
0% {
opacity: 0;
transform: scale(0.99) rotateX(-5deg);
}
100% {
transform: scale(1) rotateX(0deg);
opacity: 1;
}
}
@keyframes better-sidebar-hide {
0% {
opacity: 1;
transform: scale(1) rotateX(0deg);
}
100% {
transform: scale(0.99) rotateX(-5deg);
opacity: 0;
}
}
@keyframes better-sidebar-show {
0% {
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes better-sidebar-intro-show {
0% {
opacity: 0;
transform: translateY(5px);
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes zen-vtabs-animation {
0% {
opacity: 0;
transform: translateX(-10px);
}
20% {
opacity: 1;
}
100% {
transform: translateX(0);
}
}
@keyframes zen-sidebar-panel-animation-right {
0% {
opacity: 0;
transform: translateX(10px);
}
20% {
opacity: 1;
}
100% {
transform: translateX(0);
}
}
@keyframes zen-sidebar-panel-animation-reverse {
0% {
opacity: 1;
transform: translateX(0) scale3d(1, 1, 1);
}
99% {
opacity: 0;
transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
}
100% {
display: none !important;
}
}
/* Mark: Zen Glance */
@keyframes zen-glance-overlay-animation {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes zen-glance-overlay-animation-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes zen-rice-form-out {
0% {
transform: translateX(0);
max-height: 350px;
opacity: 1;
position: relative;
}
50% {
transform: translateX(-100%);
opacity: 0;
position: relative;
}
99% {
transform: translateX(-100%);
opacity: 0;
max-height: 15px;
position: relative;
}
100% {
transform: translateX(-100%);
opacity: 0;
pointer-events: none;
position: absolute;
}
}
@keyframes zen-rice-form-in {
0% {
position: absolute;
transform: translateX(100%);
opacity: 0;
}
99% {
position: absolute;
transform: translateX(0);
opacity: 1;
}
100% {
position: relative;
}
}
@keyframes zen-rice-form-in-2 {
from {
opacity: 0;
transform: translateX(100%);
max-height: 50px;
}
to {
opacity: 1;
transform: translateX(0);
max-height: 450px;
}
}
@keyframes zen-rice-submit-animation {
/* Scale and shake the dialog */
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes zen-back-and-forth-text {
0%,
10% {
transform: translateX(0);
left: 0;
}
45%,
65% {
transform: translateX(calc(-100% - 5px));
left: 100%;
}
90%,
100% {
transform: translateX(0);
left: 0;
}
}

29
src/browser/base/content/zen-styles/zen-branding.css
View File

@@ -1,29 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
@font-face {
font-family: 'Zen-Junicode';
src: url('chrome://browser/content/zen-fonts/JunicodeVF-Roman.woff2') format('woff2');
}
@font-face {
font-family: 'Zen-Junicode-Italic';
src: url('chrome://browser/content/zen-fonts/JunicodeVF-Italic.woff2') format('woff2');
}
.zen-branding-title {
font-size: 6rem;
line-height: 0.9;
margin-bottom: 0.4rem;
font-family: 'Zen-Junicode', serif;
font-weight: 400;
font-style: normal;
font-feature-settings: 'swsh' 1;
& .zen-branding-title-italic {
font-family: 'Zen-Junicode-Italic', serif;
}
}

31
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -1,31 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
& #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
width: -moz-available;
position: relative;
overflow: hidden;
:root:not([zen-no-padding='true']) & {
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
}
& browser[transparent='true'] {
background: rgba(255, 255, 255, 0.1);
}
}
@media -moz-pref('zen.view.experimental-rounded-view') {
#tabbrowser-tabpanels {
:root:not([zen-no-padding='true']) & {
mix-blend-mode: multiply;
-moz-osx-font-smoothing: grayscale;
isolation: isolate;
}
}
}
}

232
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

@@ -1,232 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#tabbrowser-tabpanels {
background: transparent !important;
}
#navigator-toolbox {
/* see issue #426 */
background: var(--zen-navigator-toolbox-background, transparent) !important;
--inactive-titlebar-opacity: 1;
}
#nav-bar,
#navigator-toolbox {
position: inherit;
}
:root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
#navigator-toolbox,
#zen-sidebar-splitter {
visibility: collapse;
}
}
:root[zen-before-loaded='true'] #browser > *,
:root[zen-before-loaded='true'] #urlbar {
opacity: 0 !important;
}
#browser {
width: 100%;
background: var(--zen-main-browser-background) !important;
will-change: background-color;
&::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
}
&:not([post-animating='true'])::after {
transition: background-color var(--inactive-window-transition);
}
@media -moz-pref('zen.theme.gradient') {
&[animating='true']::after {
background: var(--zen-main-browser-background-old);
backdrop-filter: blur(5px);
animation: zen-main-app-wrapper-animation 0.4s ease forwards;
transition: 0s;
}
}
@media (not (-moz-windows-mica)) and -moz-pref('zen.view.grey-out-inactive-windows') {
transition: color var(--inactive-window-transition);
:root:not([zen-welcome-stage]) &:-moz-window-inactive {
color: var(--toolbox-textcolor-inactive);
&::after {
background-color: var(--toolbox-bgcolor-inactive);
}
}
}
&::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
pointer-events: none;
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
}
}
#sidebar-box {
/** Sidebar is already hidden in full screen mode */
border: none;
}
@supports (-moz-osx-font-smoothing: auto) {
#zen-main-app-wrapper,
#zen-appcontent-wrapper,
#zen-sidebar-splitter {
appearance: -moz-window-titlebar !important;
}
}
:root:not([zen-single-toolbar='true']) #zen-appcontent-wrapper {
z-index: 2;
}
#nav-bar {
/* For some reason, firefox adds a really small border to the top of the nav-bar */
border-top: none !important;
}
#zen-main-app-wrapper {
background: var(--zen-themed-toolbar-bg-transparent);
overflow: hidden;
& > * {
z-index: 1;
}
@media (-moz-windows-accent-color-in-titlebar) and (-moz-windows-mica) {
background-color: ActiveCaption;
color: CaptionText;
transition: background-color var(--inactive-window-transition);
&:-moz-window-inactive {
background-color: InactiveCaption;
color: InactiveCaptionText;
}
}
}
#zen-appcontent-wrapper {
z-index: 1;
/* Use this trick to prevent bookmarks from overflowing the window,
* without using overflow: hidden.
*/
min-width: 1px;
}
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
& #zen-tabbox-wrapper {
margin: var(--zen-element-separation);
margin-top: 0;
}
&:not([zen-right-side='true']) #zen-tabbox-wrapper {
margin-left: 0;
}
&[zen-right-side='true'] #zen-tabbox-wrapper {
margin-right: 0;
}
}
#tabbrowser-tabbox {
display: flex;
flex-direction: row;
position: relative;
gap: var(--zen-element-separation);
}
@media not (-moz-platform: macos) {
.titlebar-buttonbox-container {
height: 100%;
}
}
@media (-moz-platform: macos) {
.titlebar-buttonbox-container {
margin-inline-end: 8px;
padding: 3px 0;
& > .titlebar-buttonbox {
margin-inline-start: var(--zen-toolbox-padding);
}
}
@media -moz-pref('zen.widget.mac.mono-window-controls') {
.titlebar-buttonbox-container {
/* Draw 3 dots as background to represent the window controls,
all with the same cololr as the titlebar */
background-image: radial-gradient(circle, var(--zen-toolbar-element-bg) 6px, transparent 0.5px);
background-size: 20px 22px;
background-position: 53% 50%;
&:not([zen-has-hover='true']) > .titlebar-buttonbox {
opacity: 0;
}
}
}
}
:root[zen-window-buttons-reversed='true'][zen-right-side='true'] .titlebar-buttonbox-container {
margin-inline-start: calc(var(--zen-element-separation) - 3px);
}
.zen-split-view-splitter[orient='vertical'],
#zen-sidebar-splitter {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--zen-element-separation);
background: transparent;
border: none;
cursor: ew-resize;
z-index: 3;
&:is(.zen-split-view-splitter[orient='vertical']) {
/* Bit of a hacky solution, but it works */
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-element-separation) * -1 - 1px);
height: unset;
cursor: ew-resize;
}
&::before {
height: 50px;
width: 2px;
background: var(--button-primary-bgcolor);
border-radius: 2px;
content: '';
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transition: opacity 0.1s ease-in-out;
pointer-events: none;
}
&:hover::before {
opacity: 1;
}
}

39
src/browser/base/content/zen-styles/zen-buttons.css
View File

@@ -1,39 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
@namespace html 'http://www.w3.org/1999/xhtml';
@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
/** This file is used to override UI inside "common-shared.css" */
/** These types of buttons look INSAINELY bad in the preferences page */
xul|button {
border-radius: var(--zen-button-border-radius) !important;
padding: var(--zen-button-padding) !important;
transition: 0.1s;
min-width: 100px !important;
font-weight: 500 !important;
border: 1px solid var(--zen-colors-border);
}
button:not(#zen-workspaces-button):active {
transform: scale(0.98);
}
html|button:not(:is(.tab-button, .ghost-button, .button-toggle, .button-edit, .button-add, )),
xul|button:is(.expander-down) {
transition: 0.2s;
min-width: unset !important;
border-radius: 6px !important;
}
.footer-button {
transition: scale 0.2s;
&:active {
scale: 0.98;
}
}

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

@@ -1,387 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* All overrides for compact mode go here */
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
%include zen-tabs/vertical-tabs-topbuttons-fix.css
@media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
&:not([zen-compact-animating]) {
& #zen-sidebar-splitter {
display: none !important;
}
#zen-tabbox-wrapper {
/* Remove extra 1px of margine we have to add to the tabbox */
margin-left: var(--zen-element-separation) !important;
margin-right: var(--zen-element-separation) !important;
}
#zen-appcontent-wrapper {
& #tabbrowser-tabbox {
margin-left: 0 !important;
}
}
#zen-sidebar-splitter {
display: none !important;
}
#zen-sidebar-top-buttons-customization-target {
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
}
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
margin-left: var(--zen-element-separation) !important;
}
&[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
margin-right: var(--zen-element-separation) !important;
margin-left: calc(var(--zen-element-separation) - 3px) !important;
}
#navigator-toolbox {
--zen-toolbox-max-width: 64px !important;
--zen-compact-float: var(--zen-element-separation);
/* Initial padding for when we are animating */
padding: 0 0 0 var(--zen-toolbox-padding) !important;
&:not([animate='true']) {
position: fixed;
z-index: 10;
transition:
left 0.15s ease,
right 0.15s ease,
opacity 1.5s ease;
top: 0;
bottom: var(--zen-element-separation);
padding: 0 var(--zen-compact-float) !important;
opacity: 0;
:root[zen-single-toolbar='true'] & {
top: calc(var(--zen-element-separation) / 2);
height: calc(100% - var(--zen-element-separation));
}
& #zen-sidebar-top-buttons {
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
}
&:not([zen-right-side='true']) #nav-bar {
margin-left: 0 !important;
}
}
&:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
}
/* 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-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
#navigator-toolbox:not([animate='true']) {
margin-top: var(--zen-toolbar-height) !important;
}
}
}
&[zen-right-side='true'] {
& #navigator-toolbox {
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
&:not([animate='true']) {
right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
}
}
& .browserSidebarContainer {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
#navigator-toolbox:not([animate='true']) #titlebar {
box-shadow: var(--zen-big-shadow);
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
padding: var(--zen-toolbox-padding) !important;
position: relative;
background: var(--zen-dialog-background);
outline: 1px solid var(--zen-colors-border-contrast);
outline-offset: -1px;
min-width: var(--zen-toolbox-min-width);
:root[zen-sidebar-expanded='true'] & {
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
:root[zen-single-toolbar='true'] {
padding-top: 0 !important;
margin-left: 0 !important;
}
@media -moz-pref('zen.view.compact.color-sidebar') {
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
/* NOTE: We MUST not add a backdrop-filter if we want the URL
* bar to be floating correctly:
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
}
& #urlbar[open][zen-floating-urlbar='true'] {
transition: left 0.05s ease;
visibility: visible;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
pointer-events: none;
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
}
}
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
#navigator-toolbox[zen-user-show],
#navigator-toolbox[zen-has-empty-tab],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
&[zen-renaming-tab='true'] #navigator-toolbox,
#navigator-toolbox:has(
*:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
) {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
0.010544 2%,
0.022757 3%,
0.038804 4%,
0.058151 5%,
0.080308 6%,
0.104828 7.000000000000001%,
0.131301 8%,
0.159358 9%,
0.188662 10%,
0.21891 11%,
0.249828 12%,
0.281172 13%,
0.312724 14.000000000000002%,
0.344288 15%,
0.375693 16%,
0.40679 17%,
0.437447 18%,
0.467549 19%,
0.497 20%,
0.525718 21%,
0.553633 22%,
0.580688 23%,
0.60684 24%,
0.632052 25%,
0.656298 26%,
0.679562 27%,
0.701831 28.000000000000004%,
0.723104 28.999999999999996%,
0.743381 30%,
0.76267 31%,
0.780983 32%,
0.798335 33%,
0.814744 34%,
0.830233 35%,
0.844826 36%,
0.858549 37%,
0.87143 38%,
0.883498 39%,
0.894782 40%,
0.905314 41%,
0.915125 42%,
0.924247 43%,
0.93271 44%,
0.940547 45%,
0.947787 46%,
0.954463 47%,
0.960603 48%,
0.966239 49%,
0.971397 50%,
0.976106 51%,
0.980394 52%,
0.984286 53%,
0.987808 54%,
0.990984 55.00000000000001%,
0.993837 56.00000000000001%,
0.99639 56.99999999999999%,
0.998664 57.99999999999999%,
1.000679 59%,
1.002456 60%,
1.004011 61%,
1.005363 62%,
1.006528 63%,
1.007522 64%,
1.008359 65%,
1.009054 66%,
1.009618 67%,
1.010065 68%,
1.010405 69%,
1.010649 70%,
1.010808 71%,
1.01089 72%,
1.010904 73%,
1.010857 74%,
1.010757 75%,
1.010611 76%,
1.010425 77%,
1.010205 78%,
1.009955 79%,
1.009681 80%,
1.009387 81%,
1.009077 82%,
1.008754 83%,
1.008422 84%,
1.008083 85%,
1.00774 86%,
1.007396 87%,
1.007052 88%,
1.00671 89%,
1.006372 90%,
1.00604 91%,
1.005713 92%,
1.005394 93%,
1.005083 94%,
1.004782 95%,
1.004489 96%,
1.004207 97%,
1.003935 98%,
1.003674 99%,
1.003423 100%
);
transition:
left 0.25s var(--zen-compact-mode-func),
right 0.25s var(--zen-compact-mode-func);
&:not([supress-primary-adjustment='true']) {
opacity: 1;
left: calc(var(--zen-element-separation) / -2);
:root[zen-right-side='true'] & {
right: calc(var(--zen-element-separation) / -2);
left: auto;
}
}
}
}
}
}
@media -moz-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
& #navigator-toolbox {
top: 0;
}
& #navigator-toolbox {
--zen-toolbox-top-align: var(--zen-element-separation);
}
& #sidebar-box,
& #titlebar,
& #zen-appcontent-wrapper,
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
margin-top: var(--zen-element-separation) !important;
}
& #zen-appcontent-wrapper {
z-index: 3 !important;
}
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
margin-top: calc(var(--zen-element-separation) * 2) !important;
}
& #zen-appcontent-navbar-container {
--zen-compact-toolbar-offset: 5px;
position: absolute;
top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
left: 0;
z-index: 20;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
border-bottom-left-radius: var(--zen-border-radius);
border-bottom-right-radius: var(--zen-border-radius);
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
transition: all 0.15s ease;
width: 100%;
opacity: 0;
background: var(--zen-dialog-background);
max-height: var(--zen-toolbar-height);
overflow: hidden;
& > * {
position: relative !important;
}
& #urlbar {
opacity: 0 !important;
}
@media -moz-pref('zen.view.compact.color-toolbar') {
background-attachment: fixed;
background: var(--zen-main-browser-background-toolbar);
background-size: 100% 2000px;
border-bottom: 1px solid var(--zen-colors-border);
}
}
& #zen-appcontent-navbar-container[zen-has-hover],
& #zen-appcontent-navbar-container:hover,
& #zen-appcontent-navbar-container:focus-within,
& #zen-appcontent-navbar-container[zen-user-show],
& #zen-appcontent-navbar-container[has-popup-menu],
& #zen-appcontent-navbar-container:has(*:is([panelopen='true'], [open='true']):not(.zen-compact-mode-ignore)) {
opacity: 1;
border-top-width: 1px;
top: -1px;
overflow: initial;
max-height: unset;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
pointer-events: none;
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
}
& #urlbar {
opacity: 1 !important;
}
& #urlbar[breakout-extend='true']:not([zen-floating-urlbar='true']) {
top: 2px !important;
opacity: 1;
}
}
}
}
}

217
src/browser/base/content/zen-styles/zen-decks.css
View File

@@ -1,217 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
#tabbrowser-tabpanels[zen-split-view='true'] {
display: flex;
flex-direction: row;
margin-top: calc(var(--zen-split-column-gap) * -1);
}
#tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) {
flex: 0;
margin: 0;
}
#zen-splitview-dropzone {
border-radius: var(--zen-native-inner-radius);
transition: inset ease-out 0.08s;
display: none;
background-color: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%);
}
#zen-splitview-dropzone[enabled='true'] {
display: initial;
}
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'],
#zen-splitview-dropzone {
flex: 1;
margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
position: absolute !important;
overflow: hidden;
}
#tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split-anim='true'] {
transition: inset 0.09s ease-out !important;
& browser {
transition: opacity 0.2s ease-out !important;
}
}
#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected {
&:not(.zen-glance-overlay) {
outline: 1px solid var(--zen-primary-color) !important;
}
&.zen-glance-overlay {
flex: 1;
margin-top: calc(var(--zen-element-separation) / 2);
}
}
#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
:root[zen-no-padding='true'] & {
--zen-element-separation: 8px;
}
--zen-split-row-gap: var(--zen-element-separation);
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
margin-right: calc(-1 * var(--zen-split-column-gap));
}
#tabbrowser-tabpanels:has(> [zen-split='true']),
#zen-splitview-overlay {
:root:not([zen-compact-mode='true']):not([customizing]) & {
@media -moz-pref('zen.view.compact.hide-toolbar') {
& {
margin-top: calc(var(--zen-split-column-gap) * -1);
}
}
}
}
#tabbrowser-tabpanels[zen-split-view] {
.zen-split-view-splitter {
display: inherit;
}
}
#zen-splitview-overlay-wrapper {
position: absolute;
pointer-events: none;
padding: inherit;
inset: 0;
}
#zen-splitview-overlay {
position: relative;
flex: 1;
z-index: 2;
}
.zen-split-view-splitter {
visibility: inherit;
-moz-subtree-hidden-only-visually: 0;
position: absolute;
pointer-events: all;
}
.zen-split-view-splitter[orient='horizontal'] {
height: var(--zen-split-column-gap);
cursor: ns-resize;
}
#zen-split-views-box:not([hidden='true']) {
display: flex !important;
}
.zen-view-splitter-header-container {
position: absolute;
top: calc(var(--zen-split-column-gap) / -2);
left: 50%;
opacity: 0;
transition: opacity 0.2s;
z-index: 100;
transform: translateX(-50%);
pointer-events: none;
}
.zen-view-splitter-header {
display: flex;
align-items: center;
position: fixed;
padding: 0.4rem 0.6rem;
border-radius: 8px;
background-color: light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
box-shadow: 0 0 0 1px var(--button-primary-border-color);
gap: 0.8rem;
transform: translateX(-50%);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
:root:not([inDOMFullscreen='true']) .browserSidebarContainer:hover .zen-view-splitter-header-container,
.zen-view-splitter-header-container:hover {
pointer-events: all;
opacity: 1;
transition-delay: 0.2s;
}
.zen-view-splitter-header-container toolbarbutton {
display: block;
-moz-context-properties: fill, fill-opacity;
border-radius: var(--tab-border-radius);
color: inherit;
fill: currentColor;
width: 16px;
height: 16px;
cursor: pointer;
appearance: none;
outline: none;
color: var(--button-primary-bgcolor);
border-top-left-radius: 0;
border-top-right-radius: 0;
& image {
width: 14px;
height: 14px;
}
&.zen-tab-rearrange-button {
cursor: move;
& image {
transform: rotate(90deg);
}
}
}
#zen-split-view-fake-browser {
position: absolute;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
overflow: hidden;
&[side='right'] {
right: 0;
&[has-split-view='true'] {
right: var(--zen-element-separation);
}
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.5rem;
pointer-events: none;
height: 3.5rem;
background: var(--zen-split-view-fake-icon);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
transition: opacity 0.2s;
transition-delay: 0.1s;
@starting-style {
opacity: 0;
}
}
&.fade-out::after {
opacity: 0;
transition-delay: 0s;
}
}

184
src/browser/base/content/zen-styles/zen-folders.css
View File

@@ -1,184 +0,0 @@
tab-group[split-view-group] {
display: flex;
flex-wrap: nowrap;
border-radius: var(--border-radius-medium);
padding: 0 2px;
margin-inline: var(--tab-block-margin);
margin-block: var(--tab-block-margin);
min-height: var(--tab-min-height);
outline: var(--tab-outline);
outline-offset: var(--tab-outline-offset);
outline-color: var(--tab-selected-outline-color);
transition: scale 0.1s ease;
align-items: center;
--zen-split-view-active-tab-bg: color-mix(in srgb, var(--zen-toolbar-element-bg), transparent 40%);
:root:not([zen-sidebar-expanded='true']) & {
padding: 0 2px;
--tab-min-height: 30px;
--tab-collapsed-width: 38px;
margin: 0 4px;
--tab-min-width: 34px;
}
& > .tabbrowser-tab {
--tab-selected-bgcolor: var(--zen-split-view-active-tab-bg);
--tab-hover-background-color: transparent;
--tab-selected-shadow: none;
--border-radius-medium: var(--tab-border-radius);
--zen-active-tab-scale: 1;
:root[zen-sidebar-expanded='true'] & {
--tab-min-height: 28px;
}
container-type: inline-size;
container-name: browser-tab;
flex: 1 !important;
padding-inline: 2px !important;
overflow: clip;
&:not(:last-child)::after {
content: '';
width: 1px;
height: 16px;
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
:root:not([zen-sidebar-expanded='true']) &:not(:last-child)::after {
width: 16px;
height: 1px;
top: auto;
bottom: 0;
right: 50%;
transform: translateX(50%);
}
& .tab-content {
min-width: 0;
:root[zen-sidebar-expanded='true'] & {
justify-content: unset !important;
}
}
}
&:has(> tab:is([visuallyselected], [multiselected])) {
background-color: var(--tab-selected-bgcolor);
box-shadow: var(--tab-selected-shadow);
& > .tabbrowser-tab {
--tab-hover-background-color: var(--zen-split-view-active-tab-bg);
& .tab-background {
background-color: var(--zen-split-view-active-tab-bg) !important;
}
&::after {
display: none;
}
}
}
&:active {
scale: var(--zen-active-tab-scale);
}
&:hover {
background-color: var(--zen-toolbar-element-bg);
}
& .tab-close-button,
& .tab-reset-button {
margin-inline-end: -3px !important;
display: none !important;
}
@container browser-tab (min-width: 70px) {
:root[zen-sidebar-expanded='true'] &:hover > .tabbrowser-tab:not([pinned]) .tab-close-button {
display: block !important;
}
}
@media (prefers-reduced-motion: no-preference) {
#tabbrowser-tabs[movingtab] & {
transition: var(--tab-dragover-transition);
}
}
}
:root:not([zen-sidebar-expanded='true']) {
tab-group {
flex-direction: column;
}
}
tab-group[split-view-group] .tabbrowser-tab {
width: 100%;
max-width: unset;
}
tab-group[split-view-group] .tab-group-label-container {
visibility: collapse;
}
tab-group[split-view-group] .tab-close-button {
display: block;
visibility: visible;
}
tab-group[split-view-group] .tab-group-line {
display: none;
background: transparent;
}
tab-group:not([split-view-group]) {
& .tab-group-label-container {
min-width: fit-content;
max-width: 100%;
height: fit-content !important;
display: flex;
justify-content: start;
margin-top: 10px;
margin-bottom: 10px;
}
& .tab-group-label {
text-align: start;
flex-grow: 1 !important;
min-width: fit-content;
max-width: 100%;
font-size: 14px !important;
display: block !important;
padding-right: 8px;
}
& .tab-group-line {
display: none !important;
}
&[collapsed] .tabbrowser-tab {
display: none !important;
}
&:not([collapsed]) .tabbrowser-tab {
margin-left: 10px;
}
&:not([collapsed]) .tabbrowser-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background-color: var(--tab-group-color);
}
}
.tab-group-line {
display: none !important;
}

157
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -1,157 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#zen-glance-sidebar-container {
position: absolute;
display: flex;
z-index: 999;
&[hidden='true'] {
display: none;
}
top: 10%;
transform: translateY(-50%);
padding: 5px;
gap: 12px;
left: 2%;
& toolbarbutton {
width: 32px;
height: 32px;
background: light-dark(rgb(24, 24, 24), rgb(231, 231, 231));
transition:
background 0.05s ease,
scale 0.05s ease;
border-radius: 999px;
appearance: none;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
opacity: 0;
padding: 8px;
&:hover {
background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
scale: 1.05;
}
&:hover:active {
scale: 0.95;
}
& label {
display: none;
&::before {
text-overflow: unset;
}
}
& image {
filter: invert(1);
}
}
& #zen-glance-sidebar-close {
width: fit-content;
& label {
display: block;
max-width: 0px;
margin: 0;
overflow: hidden;
transition:
max-width 0.2s ease,
margin-left 0.2s ease;
}
&[waitconfirmation] {
background: rgb(220, 53, 69);
color: white;
fill: white;
& label {
max-width: 4rem;
margin-left: 8px;
}
& image {
filter: none;
}
}
}
}
:root[zen-no-padding='true'] .browserSidebarContainer.zen-glance-background {
--zen-native-inner-radius: 6px;
--zen-element-separation: 6px;
}
.browserSidebarContainer.zen-glance-background,
.browserSidebarContainer.zen-glance-overlay .browserContainer {
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
}
.browserSidebarContainer.zen-glance-overlay {
box-shadow: none !important;
visibility: inherit;
:root[zen-no-padding='true'] & {
--zen-native-inner-radius: 0px;
}
& .browserContainer {
background: var(--zen-dialog-background);
position: fixed;
opacity: 0;
top: 0;
left: 0;
flex: unset !important;
&[has-finished-animation='true'] {
position: relative !important;
transition: 0s !important;
transform: none !important;
margin: auto !important;
top: 0 !important;
left: 0 !important;
}
& .browserStack {
border-radius: var(--zen-native-inner-radius);
overflow: hidden;
}
& browser {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
&[animate-full='true'] {
transform: translate(-50%, -50%);
& #zen-glance-sidebar-container {
opacity: 0 !important;
}
}
&[animate='true'] {
position: absolute;
}
}
&[fade-out='true'] {
& browser {
transition: opacity 0.1s ease;
opacity: 0;
}
}
& browser[animate-glance-open='true'] {
transition: opacity 0.2s ease-in-out;
opacity: 0;
}
}

405
src/browser/base/content/zen-styles/zen-gradient-generator.css
View File

@@ -1,405 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#PanelUI-zen-gradient-generator {
--panel-width: 320px;
--panel-padding: 10px;
min-width: var(--panel-width);
}
#PanelUI-zen-gradient-generator .panel-viewcontainer,
#PanelUI-zen-gradient-generator .panel-viewstack {
display: flex;
flex-direction: column;
width: 100%;
}
#PanelUI-zen-gradient-generator-controls {
align-items: center;
gap: var(--panel-padding);
}
#zen-theme-picker-color {
align-items: start;
width: 100%;
& label {
font-size: 12px;
margin-left: 0;
font-weight: 600;
margin-bottom: 5px;
}
& input,
& > hbox {
width: 100%;
position: relative;
}
}
#PanelUI-zen-gradient-generator-custom-input {
position: relative;
padding-right: 6px !important;
}
#PanelUI-zen-gradient-generator-color-custom-add {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}
#PanelUI-zen-gradient-colors-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
align-items: center;
gap: 1.5rem;
padding: 0 var(--panel-padding);
@media (-moz-platform: macos) {
gap: 3rem;
}
& label {
margin-left: 0;
font-weight: 600;
margin-inline: 0;
margin-bottom: 2px;
@media (-moz-platform: macos) {
font-size: larger;
}
}
}
#PanelUI-zen-gradient-generator-predefined {
display: flex;
justify-content: space-around;
align-items: center;
margin: 5px auto 10px auto;
width: 100%;
& > box {
width: 18px;
height: 18px;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: transform 0.1s;
&::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
top: 0;
left: 0;
outline: 2px solid var(--zen-toolbar-element-bg);
border-radius: 50%;
pointer-events: none;
transition: transform 0.1s;
}
&:hover {
transform: scale(1.05);
&::after {
transform: scale(1.05);
}
}
&:hover:active {
transform: scale(0.95);
&::after {
transform: scale(0.95);
}
}
}
}
#PanelUI-zen-gradient-generator-custom-list {
margin-top: 15px;
&:not(:has(.zen-theme-picker-custom-list-item)) {
display: none;
}
& .zen-theme-picker-custom-list-item {
display: flex;
padding: 5px;
position: relative;
& .zen-theme-picker-dot.custom {
background: var(--zen-theme-picker-dot-color);
border: 1px solid var(--zen-colors-border);
border-radius: 5px;
width: 20px;
height: 20px;
margin-right: 10px;
}
& .zen-theme-picker-custom-list-item-label {
font-size: 12px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
}
& .zen-theme-picker-custom-list-item-remove {
padding: 2px 4px !important;
margin: 0 !important;
margin-left: auto !important;
transition: opacity 0.1s;
opacity: 0;
}
&:hover .zen-theme-picker-custom-list-item-remove {
opacity: 1;
}
}
}
#PanelUI-zen-gradient-generator-opacity,
#PanelUI-zen-gradient-generator-texture {
margin: 0 !important;
margin-top: 5px !important;
background: transparent;
&::-moz-range-thumb {
background: var(--zen-colors-tertiary);
border: 2px solid var(--zen-colors-border);
border-radius: 12px;
height: 25px;
width: 13px;
cursor: pointer;
}
&::-moz-range-track {
background: var(--zen-colors-border);
border-radius: 999px;
height: 6px;
}
&::-moz-range-progress {
background: var(--zen-primary-color);
border-radius: 999px;
height: 8px;
}
}
.zen-theme-picker-gradient {
position: relative;
border-radius: calc(var(--zen-border-radius) - 2px);
overflow: hidden;
border-radius: var(--zen-border-radius);
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
margin-bottom: 20px;
background: var(--zen-toolbar-element-bg);
background-image: radial-gradient(light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)) 1px, transparent 0);
background-position: -19px -19px;
background-size: 5px 5px;
& .zen-theme-picker-dot {
position: absolute;
z-index: 2;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--zen-theme-picker-dot-color);
@media (-prefers-color-scheme: dark) {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
cursor: pointer;
border: 2px solid #ffffff;
animation: zen-theme-picker-dot-animation 0.5s;
transform: translate(-50%, -50%);
&:first-of-type {
width: 30px;
height: 30px;
border-width: 3px;
z-index: 2;
transition: transform 0.1s;
&:hover {
transform: scale(1.05) translate(-50%, -50%);
}
}
&[dragging='true'] {
transform: scale(1.2) translate(-50%, -50%) !important;
}
}
}
#PanelUI-zen-gradient-generator-color-click-to-add {
position: absolute;
font-weight: 600;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
pointer-events: none;
&[hidden] {
display: none;
}
}
#PanelUI-zen-gradient-generator-color-actions {
display: flex;
position: absolute;
bottom: 8px;
left: 50%;
z-index: 1;
transform: translateX(-50%);
& .separator,
& #PanelUI-zen-gradient-generator-color-toggle-algo {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.5));
}
& button {
border: none !important;
padding: 0.4rem !important;
min-width: fit-content !important;
transition: background 0.2s;
appearance: none;
& .button-box {
gap: 0.1rem;
}
&:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text {
display: none;
}
&:hover {
background: light-dark(#cfcfcf, #313131);
}
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
}
& .separator {
width: 1px;
margin: 0 0.5rem;
height: 30px;
}
}
@media not -moz-pref('zen.theme.gradient.show-custom-colors') {
#PanelUI-zen-gradient-generator-custom-colors {
display: none !important;
}
}
#PanelUI-zen-gradient-generator-texture-wrapper {
width: 4rem;
height: 4rem;
position: relative;
@media (-moz-platform: macos) {
width: 25%;
aspect-ratio: 1;
height: unset;
}
&::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
border: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
border-radius: 50%;
/* 3d effect */
background: linear-gradient(-45deg, transparent -10%, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) 110%);
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
&::before {
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: hard-light;
width: 60%;
height: 60%;
pointer-events: none;
top: 50%;
border-radius: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
content: '';
position: absolute;
}
& .zen-theme-picker-texture-dot {
height: 4px;
width: 4px;
border-radius: 50%;
background: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.2));
position: absolute;
transition: opacity 0.2s;
transform: translate(-50%, -50%);
pointer-events: none;
&:not(.active) {
opacity: 0.2;
}
}
& #PanelUI-zen-gradient-generator-texture-handler {
width: 6px;
height: 12px;
background: light-dark(#757575, #d1d1d1);
position: absolute;
transition: height 0.1s;
z-index: 2;
border-radius: 2px;
cursor: pointer;
&:hover {
height: 14px;
}
}
}
#PanelUI-zen-gradient-generator-rotation-line {
border: 1px solid var(--zen-colors-border);
position: absolute;
--rotation-padding: 15px;
width: calc(100% - var(--rotation-padding) * 2);
border-bottom-color: transparent;
height: calc(100% - var(--rotation-padding) * 2);
top: var(--rotation-padding);
left: var(--rotation-padding);
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
#PanelUI-zen-gradient-generator-rotation-dot {
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid var(--zen-colors-border);
background: var(--zen-colors-tertiary);
opacity: 0;
cursor: pointer;
z-index: 2;
transition: transform 0.1s;
&:hover {
transform: scale(1.1);
}
}

302
src/browser/base/content/zen-styles/zen-media-controls.css
View File

@@ -1,302 +0,0 @@
#zen-media-controls-toolbar {
--progress-height: 4px;
--button-spacing: 2px;
display: flex;
justify-content: space-between;
min-width: 0;
background: transparent;
container-type: inline-size;
.toolbarbutton-1 {
border-radius: 5px;
color: white;
}
#zen-media-buttons-hbox {
align-items: start;
margin-top: -4px;
--toolbarbutton-outer-padding: 2px;
}
&:not([media-sharing]) {
#media-device-buttons {
display: none;
}
}
#media-device-buttons {
gap: 2px;
}
&[media-sharing] #zen-media-controls-hbox > toolbarbutton:not(:first-child) {
display: none;
#media-device-buttons {
display: flex;
}
}
&:not([can-pip]) {
#zen-media-info-vbox {
width: calc(100% - 26px);
flex-shrink: 0;
}
#zen-media-pip-button {
display: none;
}
}
#zen-media-prev-button,
#zen-media-play-pause-button,
#zen-media-next-button {
margin: 0;
}
image.toolbarbutton-icon {
padding: 5px;
width: 26px;
height: 26px;
}
#zen-media-progress-bar {
appearance: none;
width: 100%;
height: var(--progress-height);
margin: 0 8px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: height 0.15s ease-out;
&::-moz-range-track {
background: var(--zen-colors-border);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-progress {
background: var(--zen-primary-color);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-thumb {
background: var(--zen-primary-color);
border: none;
width: calc(var(--progress-height) * 2);
height: calc(var(--progress-height) * 2);
border-radius: 50%;
cursor: pointer;
transform: scale(0);
transition: transform 0.15s ease-out;
}
&:hover::-moz-range-thumb {
transform: scale(1);
}
}
&:hover {
.show-on-hover {
max-height: 50px;
padding: 5px;
margin-bottom: 0;
opacity: 1;
transform: translateY(0) !important;
pointer-events: auto;
}
}
& #zen-media-focus-button::after {
content: '';
position: absolute;
width: 110%;
height: 110%;
background-repeat: no-repeat;
opacity: 1;
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
top: -70%;
left: 50%;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
transition: opacity 0.8s ease;
opacity: 1;
}
&:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {
opacity: 0;
}
#zen-media-focus-button {
align-self: center;
transition:
opacity 0.2s ease,
transform 0.2s ease;
position: relative;
& image {
&:-moz-broken {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
background: color-mix(in srgb, var(--zen-primary-color) 70%, transparent 30%);
}
}
}
& > toolbaritem {
--zen-media-control-bg: light-dark(rgba(255, 255, 255, 0.87), rgba(0, 0, 0, 0.87));
flex-grow: 1;
padding: 0;
transition: padding 0.3s ease-out;
position: absolute;
left: 0;
bottom: 0;
padding: 4px 6px;
border-radius: var(--border-radius-medium);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
background-color: var(--zen-media-control-bg);
backdrop-filter: saturate(3) contrast(2) blur(10px);
width: 100%;
}
.show-on-hover {
max-height: 0;
opacity: 0;
transform: translateY(1rem);
padding: 0 6px;
pointer-events: none;
transition:
max-height 0.2s ease,
opacity 0.2s ease,
transform 0.2s ease,
padding 0.2s ease;
}
#zen-media-current-time,
#zen-media-duration {
margin: 0 0 0 1px;
font-size: x-small;
opacity: 0.7;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
}
#zen-media-controls-toolbar {
display: none;
animation: none;
transition: none;
&:not([hidden]) {
display: flex;
height: 2.5rem;
overflow: visible;
position: relative;
z-index: 2;
}
}
#zen-media-title,
#zen-media-artist {
align-self: start;
}
#zen-media-artist {
opacity: 0.7;
font-size: smaller;
&:empty {
display: none;
}
}
#zen-media-title {
height: 16px;
font-size: math;
}
#zen-media-main-vbox,
#zen-media-info-vbox,
#zen-media-progress-hbox {
width: 100%;
}
#zen-media-info-vbox {
#zen-media-controls-toolbar:not([media-position-hidden]) & {
transition-delay: 0.01s !important;
}
overflow-x: hidden;
overflow-x: visible;
white-space: nowrap;
/* Overflow inner box shadow from the left to simulate overflow */
mask-image: linear-gradient(to left, transparent, var(--zen-media-control-bg) 0.6em);
min-width: 1px;
&::before {
content: '';
position: absolute;
width: 0.6em;
background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%);
pointer-events: none;
top: 6px;
left: 0;
height: calc(100% - 6px);
z-index: 1;
}
& label {
min-height: 16px;
margin-left: 0;
font-weight: 500;
position: relative; /* For the animation */
&[overflow] {
animation: zen-back-and-forth-text 10s infinite ease-in-out;
}
}
}
#zen-media-main-vbox {
height: 100%;
justify-content: space-between;
}
#zen-media-progress-hbox {
flex-grow: 1;
height: 2rem;
align-items: center;
padding-top: 0px !important;
#zen-media-controls-toolbar[media-position-hidden] & {
display: none;
}
}
#zen-media-controls-hbox {
align-items: flex-end;
justify-content: space-between;
max-width: 100%;
--toolbarbutton-outer-padding: 0;
}
#zen-media-info-container {
padding-right: 0 !important;
}
#zen-media-controls-toolbar[can-pip] {
#zen-media-info-vbox {
flex-shrink: 1;
}
#zen-media-pip-button {
display: flex;
}
}
:root:not([zen-sidebar-expanded='true']) {
#zen-media-controls-toolbar {
display: none;
}
}

66
src/browser/base/content/zen-styles/zen-panel-ui.css
View File

@@ -1,66 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
panel[type='arrow'][animate='open'] {
@media (-moz-platform: macos) {
animation: zen-jello-animation-macos 0.4s ease-out;
&[side='bottom'] {
/* Animate from the bottom */
-zen-window-transform-origin: 0 100%;
}
:root[zen-right-side='true'] & {
/* Animate from the right */
-zen-window-transform-origin: 100% 0;
&[side='bottom'] {
/* Animate from the bottom right */
-zen-window-transform-origin: 100% 100%;
}
}
}
@media (-moz-platform: linux) or ((-moz-platform: windows) and (not (-moz-windows-mica-popups))) {
/* Mica popups have a weird background while the animation is running */
&::part(content) {
animation: zen-jello-animation 0.35s ease;
}
}
}
panel[type='arrow'][animate]:not([animate='open']) {
animation: zen-jello-out-animation 0.3s ease-in-out;
}
menupopup,
panel[type='arrow'] {
@media (-moz-windows-mica-popups) {
appearance: auto !important;
-moz-default-appearance: menupopup;
/* The blur behind doesn't blur all that much, add a semi-transparent
* background to improve contrast */
--panel-background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)) !important;
--panel-border-color: transparent !important;
--panel-shadow-margin: 0px !important;
transition-duration: 0s !important;
&::part(content) {
animation: none !important;
}
}
@media (-moz-platform: macos) {
appearance: auto !important;
-moz-default-appearance: menupopup;
/* We set the default background here, rather than on ::part(content),
* because otherwise it'd interfere with the native look. Non-native-looking
* popups should get their background via --panel-background */
background-color: Menu;
--panel-shadow-margin: 0px !important;
--panel-background: transparent !important;
--panel-border-color: transparent;
/* This should be kept in sync with GetMenuMaskImage() */
--panel-border-radius: 6px;
}
}

70
src/browser/base/content/zen-styles/zen-panels/bookmarks.css
View File

@@ -1,70 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#zenEditBookmarkPanelFaviconContainer {
border: 1px solid var(--input-border-color);
width: 100px;
height: 100px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
margin: 16px;
background: light-dark(#fff, rgba(255, 255, 255, 0.1));
}
#editBookmarkPanel::part(content) {
display: flex;
flex-direction: row;
}
#zenEditBookmarkPanelFavicon {
width: 20px;
height: 20px;
}
#editBookmarkPanel .panel-header {
min-height: 0;
padding-bottom: 0;
padding-top: 16px;
}
#editBMPanel_namePicker {
width: -moz-available;
}
label.editBMPanel_folderRow,
label.editBMPanel_nameRow {
min-width: 60px;
}
hbox.editBMPanel_folderRow {
width: -moz-available;
}
.zenEditBMPanel_fieldContainer:not(:first-child) {
margin-top: 10px;
}
.zenEditBMPanel_fieldContainer {
align-items: center;
}
#editBookmarkPanelBottomContent {
display: none;
}
:host(:not([native])) #label-box {
font-weight: 500;
}
#editBMPanel_folderMenuList::part(icon) {
margin-right: 10px;
}
/* Bookmarks in toolbar */
#PersonalToolbar {
background: transparent;
}

14
src/browser/base/content/zen-styles/zen-panels/dialog.css
View File

@@ -1,14 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* Zen Welcome dialog override */
@media (prefers-color-scheme: dark) {
.dialogBox:not(.spotlightBox) {
border: 1px solid var(--zen-colors-border);
}
}
.dialogBox:not(.spotlightBox) {
min-width: min(80vw, 376px);
}

73
src/browser/base/content/zen-styles/zen-panels/extensions.css
View File

@@ -1,73 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#unified-extensions-manage-extensions {
padding-left: 20px;
}
panelview .unified-extensions-item-action-button {
padding: 5px 20px;
}
#unified-extensions-description {
padding: 0 20px;
margin: 0;
}
.unified-extensions-item {
padding: 0;
}
#unified-extensions-view {
--uei-icon-size: 16px;
.unified-extensions-item {
margin-block: 0;
border-radius: var(--arrowpanel-menuitem-border-radius);
> .unified-extensions-item-action-button {
.unified-extensions-item-message-deck {
display: none;
}
&:hover {
background-color: initial;
}
}
> .unified-extensions-item-menu-button {
list-style-image: url('chrome://global/skin/icons/more.svg');
padding: 0;
> .toolbarbutton-icon {
padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
border: none;
opacity: 0;
}
&:hover {
> .toolbarbutton-icon {
background-color: initial;
}
&:active {
color: var(--button-primary-hover-bgcolor);
}
}
}
&:hover {
background-color: var(--panel-item-hover-bgcolor);
> .unified-extensions-item-menu-button > .toolbarbutton-icon {
opacity: 1;
}
}
&:has(> .unified-extensions-item-action-button:not([disabled]):hover:active) {
background-color: var(--panel-item-active-bgcolor);
}
}
}

9
src/browser/base/content/zen-styles/zen-panels/print.css
View File

@@ -1,9 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
.printSettingsBrowser {
min-width: 350px;
}

375
src/browser/base/content/zen-styles/zen-popup.css
View File

@@ -1,375 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
@import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css');
@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css');
@import url('chrome://browser/content/zen-styles/zen-panels/print.css');
@import url('chrome://browser/content/zen-styles/zen-panels/dialog.css');
:root {
--panel-subview-body-padding: 2px 0;
--arrowpanel-menuitem-border-radius: 5px;
--arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline);
--arrowpanel-menuitem-padding-block: 8px;
--arrowpanel-menuitem-padding-inline: 14px;
--uc-arrowpanel-menuicon-margin-inline: 14px;
--uc-arrowpanel-menuitem-margin-inline: 4px;
--uc-arrowpanel-menuitem-margin-block: 2px;
--panel-separator-margin-vertical: 2px;
--panel-separator-margin-horizontal: 1px;
--uc-panel-zoom-button-padding: 8px;
--uc-panel-zoom-button-inline-padding: 9px;
--uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block));
--uc-autocomplete-panel-menuitem-margin: 4px;
--uc-autocomplete-panel-menuicon-padding-inline: 14px;
--uc-autocomplete-panel-separator-margin-vertical: 4px;
--uc-permission-itemcontainer-padding-block: 8px;
--uc-permission-item-margin-block: 4px;
--uc-permission-item-padding-inline: 16px;
--panel-separator-color: var(--zen-colors-border);
--zen-panel-separator-width: 1px;
}
menupopup,
panel {
--panel-background: var(--arrowpanel-background);
--panel-border-radius: var(--zen-native-inner-radius);
}
/* split-view popup */
#confirmation-hint {
--arrowpanel-background: var(--zen-colors-primary);
}
/* app menu */
.addon-banner-item,
.panel-banner-item {
margin: 2px 4px 2px;
padding-inline: 4px 12px;
padding-block: var(--arrowpanel-menuitem-padding-block);
border-radius: var(--arrowpanel-menuitem-border-radius);
}
#appMenu-fxa-label2 label,
#PanelUI-fxa-menu-syncnow-button label {
margin-block: 0;
}
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton) > .toolbarbutton-icon + .toolbarbutton-text,
#appMenu-fxa-label2 > vbox {
padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
}
/* special case menuitems with no icons */
#appMenu-zoom-controls > .toolbarbutton-text,
#fxa-manage-account-button > vbox,
#PanelUI-fxa-menu-syncnow-button > hbox {
padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline));
}
/* firefox profile avatar in appmenu */
#appMenu-fxa-label2::before {
content: '';
display: -moz-box;
height: 16px;
width: 16px;
background: var(--avatar-image-url) 0/16px;
scale: 1.25;
border-radius: 99px;
}
/* disable proton account separator */
#appMenu-fxa-separator {
border-image: none;
}
#appMenu-fxa-status2:not([fxastatus]) {
padding-block: 0;
}
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1);
}
/* zoom controls */
#appMenu-zoom-controls {
border-top: 1px solid var(--panel-separator-color);
padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline))
var(--uc-arrowpanel-menuitem-margin-inline);
padding-block: var(--uc-panel-zoom-padding-block);
margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1);
}
#appMenu-zoom-controls > .subviewbutton {
padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding);
margin: 0;
}
#appMenu-zoom-controls > #appMenu-zoomReset-button2 {
padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2);
}
/* #appMenu-zoomReduce-button2, */
#appMenu-zoom-controls > #appMenu-fullscreen-button2 {
margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px);
}
#appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
content: '';
border-inline-start: 1px solid var(--panel-separator-color);
display: block;
position: relative;
height: 32px;
margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
transform: translateX(
calc(
var(--uc-panel-zoom-button-inline-padding) * -1 -
(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px
)
);
}
#appMenu-zoomReset-button2 {
height: calc(16px + var(--uc-panel-zoom-button-padding) * 2);
min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2);
}
#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
background-color: var(--panel-item-hover-bgcolor);
}
#appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
#appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
background-color: var(--panel-item-active-bgcolor);
}
#appMenu-zoomReset-button2 > .toolbarbutton-text,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
background-color: transparent;
padding: 0;
}
.subviewbutton[shortcut]::after {
opacity: 0.7;
}
#widget-overflow-mainView .panel-subview-body {
padding-bottom: 0;
}
.PanelUI-subView > .panel-header + toolbarseparator {
margin-bottom: 0;
}
.PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body {
padding-top: var(--panel-separator-margin-vertical);
}
#identity-popup-security-button {
margin-bottom: var(--panel-separator-margin-vertical);
}
#permission-popup-mainView-panel-header,
#identity-popup-mainView-panel-header,
#protections-popup-mainView-panel-header,
.panel-header {
min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px);
}
/* URL bar popup */
.identity-popup-security-connection > hbox > description {
margin-inline-start: 0;
}
.identity-popup-security-connection.identity-button {
margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px));
}
#identity-popup-mainView-panel-header-span,
#permission-popup-mainView-panel-header-span,
#identity-popup-mainView-panel-header label,
#permission-popup-mainView-panel-header label,
#protections-popup-mainView-panel-header-span {
margin-block: 0;
}
.permission-popup-section {
padding-block: var(--uc-permission-itemcontainer-padding-block);
}
#permission-popup-permissions-content {
padding-inline: var(--uc-permission-item-padding-inline);
}
.permission-popup-permission-item,
#permission-popup-storage-access-permission-list-header {
margin-block: var(--uc-permission-item-margin-block);
}
.permission-popup-permission-label,
.permission-popup-permission-header-label {
margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
}
#editBookmarkPanel > #editBookmarkHeaderSeparator,
#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
margin-inline: 0;
}
#identity-popup-mainView > toolbarseparator:first-child,
#unified-extensions-view > toolbarseparator:first-child {
display: none;
opacity: 0;
}
menupopup::part(content),
panel::part(content) {
border: var(--zen-appcontent-border);
}
menupopup,
panel {
box-shadow: none;
}
.panel-subview-footer-button {
padding-top: 10px;
padding-bottom: 10px;
}
#identity-popup-clear-sitedata-footer {
margin: 0;
padding: 0;
}
.panel-subview-footer-button {
--arrowpanel-menuitem-padding-block: 20px;
--arrowpanel-menuitem-padding-inline: 15px;
}
toolbarseparator,
menuseparator {
border-width: var(--zen-panel-separator-width);
}
#appMenu-zoom-controls {
border-top-width: var(--zen-panel-separator-width);
}
#identity-popup-multiView toolbarseparator,
#editBookmarkHeaderSeparator {
display: none;
}
/* Context menu */
menu,
menuitem {
&:where([_moz-menuactive]:not([disabled='true'])) {
background-color: var(--button-hover-bgcolor);
color: var(--button-hover-color);
}
}
/*Bookmark workspace selector styles*/
.workspace-dropdown {
position: relative;
width: 100%;
display: flex;
}
.workspace-trigger {
width: 100%;
text-align: left;
padding: 8px 12px;
border: 1px solid var(--input-border-color);
border-radius: 4px;
background-color: var(--zen-colors-tertiary);
display: flex;
align-items: center;
justify-content: space-between;
}
#editBMPanel_workspaceList {
flex-direction: column;
width: 100%;
max-height: 200px;
overflow-y: auto;
margin-top: 4px;
border: 1px solid var(--zen-colors-border);
border-radius: 4px;
background-color: var(--zen-colors-tertiary);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
padding: 4px 0;
}
#editBMPanel_workspaceList li {
list-style: none;
margin: 0;
padding: 0;
}
#editBMPanel_workspaceList li > label {
display: flex;
align-items: center;
padding: 4px 12px;
cursor: pointer;
}
#editBMPanel_workspaceList input[type='checkbox'] {
margin-right: 8px;
}
/* Section: Toast notifications */
#zen-toast-container {
position: fixed;
top: calc(var(--zen-element-separation) * 2);
z-index: 1000;
gap: 1rem;
display: flex;
align-items: end;
:root:not([zen-right-side='true']) & {
right: calc(var(--zen-element-separation) * 2);
}
:root[zen-right-side='true'] & {
left: calc(var(--zen-element-separation) * 2);
}
& .zen-toast {
padding: 0.5rem 0.6rem;
border-radius: 12px;
background: linear-gradient(
170deg,
var(--zen-primary-color) -40%,
color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
);
color: var(--button-primary-color);
box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
font-weight: 500;
gap: 5px;
flex-direction: column;
gap: 2px;
width: fit-content;
& .description {
opacity: 0.6;
}
}
}

226
src/browser/base/content/zen-styles/zen-rices.css
View File

@@ -1,226 +0,0 @@
#zen-rice-share-dialog-overlay:not([hidden]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
#zen-rice-share-dialog,
#zen-rice-share-dialog-notice {
color: var(--panel-color);
background: var(--arrowpanel-background);
border-radius: var(--zen-native-inner-radius);
box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, 0.2);
border: var(--zen-appcontent-border);
overflow: hidden;
animation: zen-jello-animation-large 0.4s ease;
max-width: 400px;
&[animate='true'] {
animation: zen-rice-submit-animation 1s cubic-bezier(0.77, 0, 0.18, 1);
}
& .zen-rice-share-content {
padding: 10px 0;
border-top: var(--zen-appcontent-border);
background: var(--arrowpanel-background);
position: relative;
align-items: center;
min-height: 50px;
&:has(#zen-rice-share-first-form:not([fade-out])),
&:has(#zen-rice-share-success) {
padding-top: 20px;
}
& > vbox {
width: 100%;
padding: 0 10px;
}
& #zen-rice-share-first-form input[type='text'] {
width: 100%;
padding: 1px 2px;
border: 0;
border-bottom: 1px solid var(--zen-appcontent-border);
background: transparent;
font-style: italic;
font-weight: 600;
}
& #zen-rice-share-name {
font-style: normal !important;
font-size: 24px;
margin-left: 1px;
}
& .indent {
margin-left: 30px;
}
}
& .zen-rice-share-header {
height: 200px;
margin-bottom: -20px;
}
& #zen-rice-share-options {
padding: 10px 0;
max-height: 30px;
overflow: hidden;
transition:
max-height 0.3s ease,
height 0.3s ease;
&[zen-collapsed='false'] {
max-height: 350px;
}
& > .options-header {
font-weight: 600;
margin-bottom: 5px;
position: relative;
cursor: pointer;
align-items: center;
color: inherit;
-moz-context-properties: fill, fill-opacity;
fill: var(--toolbarbutton-icon-fill);
& label {
width: fit-content;
cursor: pointer;
}
}
& > .options-header image {
transition: transform 0.3s ease;
width: 15px;
height: 15px;
}
&[zen-collapsed='false'] > .options-header image {
transform: rotate(90deg);
}
& > checkbox {
margin-left: 15px;
}
}
& .panel-footer {
margin: 0;
margin-top: 10px;
& button {
justify-content: center;
}
}
#zen-rice-share-error {
border: 1px solid rgba(255, 0, 0, 0.5);
background: rgba(255, 0, 0, 0.1);
padding: 5px;
transition: opacity 0.3s ease;
border-radius: var(--zen-native-inner-radius);
@starting-style {
opacity: 0;
}
& button {
margin-left: auto;
margin-top: 2px;
}
}
/* Animations */
#zen-rice-share-first-form[fade-out] {
position: absolute;
transform: translateX(-100%);
pointer-events: none;
animation: zen-rice-form-out 0.5s ease;
}
#zen-rice-share-second-form {
animation: zen-rice-form-in 0.5s ease forwards;
justify-content: center;
& > hbox {
width: 100%;
height: 5px;
border-radius: 100px;
border: 1px solid var(--zen-colors-border);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--zen-primary-color);
transition: width 4s cubic-bezier(1, 0, 0, 1);
@starting-style {
width: 0;
}
}
}
&[fade-out] {
position: absolute !important;
animation: zen-rice-form-out 0.5s ease forwards;
}
}
#zen-rice-share-success {
overflow-y: hidden;
max-height: 0px;
animation: zen-rice-form-in-2 0.5s ease forwards;
& > h1 {
margin: 0;
font-size: 20px;
}
& > p {
color: var(--text-color-deemphasized);
}
& label {
margin: 0;
margin-top: 15px;
font-weight: 600;
margin-bottom: 5px;
}
}
}
#zen-rice-share-dialog-notice {
padding: 15px;
& br {
margin-bottom: 10px;
}
& > p {
color: var(--text-color-deemphasized);
margin-top: 10px;
}
.panel-footer {
margin-top: 10px;
align-items: center;
}
}

71
src/browser/base/content/zen-styles/zen-sidebar.css
View File

@@ -1,71 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#zen-profile-button {
& stack {
padding: 0;
}
& .toolbarbutton-badge {
display: none !important;
}
& stack {
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
display: flex;
justify-content: center;
align-items: center;
& > image {
width: 0;
}
}
& #zen-profile-button-icon {
width: 20px;
height: 20px;
list-style-image: var(--avatar-image-url);
border-radius: 50%;
pointer-events: none;
list-style-image: var(--avatar-image-url);
-moz-context-properties: fill;
fill: currentColor;
border: 1px solid var(--zen-colors-border);
}
}
/* Bookmarks sidebar */
#zen-tabbox-wrapper {
& #sidebar-splitter {
opacity: 0;
margin: 0 calc(-1 * var(--zen-element-separation));
}
& #sidebar-box {
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
overflow: hidden;
&[positionend=''] {
order: 6;
& ~ #sidebar-splitter {
order: 5;
}
}
:root:not([zen-right-side='true']) &[positionend='true'] {
margin-right: var(--zen-element-separation);
}
:root[zen-right-side='true'] & {
margin-left: var(--zen-element-separation);
}
}
}
/* Menubar */
#toolbar-menubar {
display: none !important;
}

41
src/browser/base/content/zen-styles/zen-single-components.css
View File

@@ -1,41 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* Screenshots */
#screenshotsPagePanel {
position: absolute !important;
top: 3%;
right: 1.5%;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
margin-left: 10px;
display: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#customization-footer #customization-toolbar-visibility-button {
display: none !important;
}
#alltabs-button {
display: none !important;
}
.private-browsing-indicator-with-label {
display: none !important;
}
body > #confetti {
z-index: 1;
}
/* Bookmarks */
#PersonalToolbar:not([collapsed='true']) {
min-height: 30px;
}

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

@@ -1,19 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* Styles for both vertical and horizontal tabs */
@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;
z-index: 0;
}
@media -moz-pref('zen.workspaces.hide-default-container-indicator') {
.tabbrowser-tab[zenDefaultUserContextId='true'] .tab-context-line {
display: none !important;
}
}

335
src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
View File

@@ -1,335 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
@media not -moz-pref('zen.tabs.vertical') {
:root #browser {
display: flex !important;
flex-direction: column !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;
--tabstrip-min-height: calc(var(--tab-min-height) - 4 * var(--tab-block-margin));
--tab-min-height: 10px !important;
}
.vertical-pinned-tabs-container-separator {
display: none !important;
}
#zen-essentials-container,
#vertical-pinned-tabs-container,
#tabbrowser-arrowscrollbox {
-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;
align-items: center;
}
#titlebar {
flex-direction: row !important;
width: 100%;
height: 36px !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-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-reset-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;
min-width: 40px !important;
flex: 1 1 150px !important;
width: -moz-available;
&:is(:hover, [visuallyselected]) .tab-close-button {
display: block;
--tab-inline-padding: 0; /* Avoid weird padding */
margin-inline-end: 0 !important;
}
}
.tabbrowser-tab[selected] {
flex: 2 0 150px !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%);
}
/* 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-bottom-buttons {
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;
}
#nav-bar {
width: unset !important;
min-width: 500px !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;
}
}
}

35
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
View File

@@ -1,35 +0,0 @@
height: var(--zen-toolbar-height);
@media -moz-pref('zen.view.hide-window-controls') {
& {
transition:
height 0.15s ease,
opacity 0.1s ease-out;
transition-delay: 0.2s;
& > * {
transition: opacity 0.2s ease-out;
transition-delay: 0.2s;
}
}
&:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(:has(*:is([panelopen='true'], [open='true']))) {
transition-delay: 0.2s;
height: var(--zen-element-separation);
overflow: hidden;
opacity: 0;
& > * {
opacity: 0;
pointer-events: none;
}
}
@media -moz-pref('zen.view.experimental-no-window-controls') {
&:has(#PersonalToolbar[collapsed='true']) {
max-height: 0 !important;
overflow: hidden;
opacity: 0 !important;
pointer-events: none !important;
}
}
}

16
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbuttons-fix.css
View File

@@ -1,16 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
&
#zen-sidebar-top-buttons:not(
:has(#zen-sidebar-top-buttons-customization-target > *:not(#zen-sidebar-top-buttons-separator))
) {
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}

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

File diff suppressed because it is too large Load Diff

231
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -1,231 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* 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.
*/
:host(:is(.anonymous-content-host, notification-message)),
:root,
.zenLooksAndFeelColorOption {
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
* in the preferences page.
*/
/* Default values */
--zen-border-radius: 7px;
--zen-primary-color: #ffb787;
/* Branding */
--zen-branding-dark: #1d1d1d;
--zen-branding-coral: #f76f53;
--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));
/** Zen colors are generated automatically from the primary color */
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
--zen-colors-secondary: color-mix(in srgb, var(--zen-colors-primary) 20%, white 80%);
--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: var(--zen-branding-bg-reverse);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, 0.11) 90%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
--zen-dialog-background: var(--zen-colors-tertiary);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%);
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
--in-content-primary-button-background: color-mix(
in srgb,
var(--zen-primary-color) 30%,
var(--zen-branding-bg-reverse) 70%
) !important;
--in-content-primary-button-background-hover: color-mix(
in srgb,
var(--zen-primary-color) 35%,
var(--zen-branding-bg-reverse) 65%
) !important;
--in-content-primary-button-background-active: color-mix(
in srgb,
var(--zen-primary-color) 40%,
var(--zen-branding-bg-reverse) 60%
) !important;
--button-text-color-primary: var(--zen-branding-bg) !important;
--in-content-primary-button-text-color: var(--zen-branding-bg) !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;
--in-content-accent-color: var(--zen-colors-primary) !important;
--in-content-accent-color-active: currentColor !important;
/* This is like the secondary button */
--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, currentColor 3%, transparent 97%) !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;
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
--toolbarbutton-icon-fill: light-dark(rgba(57, 57, 58, 0.6), rgba(251, 251, 254, 0.6)) !important;
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
--button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
--button-primary-color: var(--in-content-primary-button-text-color) !important;
--button-background-color: var(--in-content-button-background) !important;
--button-background-color-hover: var(--in-content-button-background-hover) !important;
--button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important;
--color-accent-primary: var(--button-primary-bgcolor) !important;
--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-colors-primary-foreground) !important;
--link-color-active: color-mix(in srgb, var(--zen-colors-primary-foreground) 80%, transparent 20%) !important;
--in-content-page-background: var(--zen-colors-tertiary) !important;
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.1));
/* Toolbar */
--zen-toolbar-height: 38px;
--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;
--input-bgcolor: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
/* XUL */
--zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
--zen-main-browser-background-toolbar: var(--zen-main-browser-background);
--browser-area-z-index-toolbox: 2 !important;
--attention-dot-color: transparent !important;
--zen-appcontent-border: 1px solid var(--zen-colors-border);
--toolbarbutton-border-radius: 6px;
--urlbar-margin-inline: 1px !important;
--tab-icon-overlay-stroke: light-dark(white, black) !important;
--fp-contextmenu-border-radius: 8px;
--fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0;
--fp-contextmenu-menuitem-border-radius: calc(4px + var(--fp-contextmenu-menuitem-border-width));
--fp-contextmenu-menuitem-padding-block: 6px;
--fp-contextmenu-menuitem-padding-inline: 10px;
--fp-contextmenu-menuitem-border-width: 2px;
--fp-contextmenu-menuicon-margin-inline: 12px;
--fp-contextmenu-menuitem-margin-inline: calc(4px - var(--fp-contextmenu-menuitem-border-width));
--fp-contextmenu-menuitem-margin-block: 0px;
--fp-contextmenu-menuitem-margin: var(--fp-contextmenu-menuitem-margin-block) var(--fp-contextmenu-menuitem-margin-inline);
--fp-contextmenu-separator-vertical: calc(4px - var(--fp-contextmenu-menuitem-border-width));
--fp-contextmenu-separator-horizontal: 0;
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
--toolbar-bgcolor: transparent;
--tab-close-button-padding: 5px !important;
--toolbarbutton-active-background: var(--zen-toolbar-element-bg);
--input-bgcolor: var(--zen-colors-tertiary) !important;
--input-border-color: var(--zen-input-border-color) !important;
--zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
--zen-workspace-indicator-height: 48px;
@media (-moz-windows-mica) or (-moz-platform: macos) {
background: transparent;
--zen-themed-toolbar-bg-transparent: transparent;
@media -moz-pref('zen.widget.windows.acrylic') {
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 35%, transparent 65%);
}
}
@media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') {
background: transparent;
--zen-themed-toolbar-bg-transparent: transparent;
}
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;
--arrowpanel-background: var(--zen-dialog-background) !important;
--zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
--zen-active-tab-scale: 0.98;
/* Nativity */
--zen-native-content-radius: var(--zen-border-radius);
@media (-moz-platform: linux) {
--zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius);
}
--zen-native-inner-radius: var(
--zen-webview-border-radius,
/* Inner radius calculation:
* 1. If the native radius - the separation is less than 4px, use 4px.
* 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
*/
max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2))
);
/** Other theme-related styles */
@media (-moz-platform: macos) {
font-family:
SF Pro,
ui-sans-serif,
system-ui,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
}
}
@media (prefers-color-scheme: dark) {
:host(:is(.anonymous-content-host, notification-message)),
:root {
--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%);
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, var(--zen-dark-color-mix-base) 10%);
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);
--zen-dialog-background: var(--zen-dark-color-mix-base);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
}
}

13
src/browser/base/content/zen-styles/zen-toolbar.css
View File

@@ -1,13 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#nav-bar,
#zen-sidebar-top-buttons {
background: transparent;
}
:root[inDOMFullscreen='true'] #zen-appcontent-navbar-container {
visibility: collapse;
}

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

@@ -1,541 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* URL and tool bars */
#urlbar-container {
padding-block: 0 !important;
}
#urlbar {
--toolbarbutton-border-radius: 8px;
--urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
--urlbarView-hover-background: var(--toolbarbutton-hover-background);
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
border-radius: var(--toolbarbutton-border-radius);
padding: 1px;
:root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
--urlbar-container-padding: 2px !important;
}
}
.urlbar-input::placeholder {
text-overflow: ellipsis;
}
#searchbar:focus-within {
border-color: transparent !important;
}
#urlbar-background {
background: var(--zen-toolbar-element-bg) !important;
border-radius: var(--border-radius-medium);
outline: none !important;
border: none !important;
margin: 1px;
box-shadow: none !important;
}
#urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,
#searchbar:focus-within {
outline: none !important;
outline-offset: none !important;
outline-color: none !important;
}
#urlbar:not([breakout-extend='true']) {
& #urlbar-background {
transition: background-color 0.15s ease;
}
&:hover #urlbar-background {
background-color: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2)) !important;
}
}
#identity-box.chromeUI:not([pageproxystate='invalid']) {
& #identity-icon-box {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
}
& #identity-icon-label {
display: none;
}
}
#identity-permission-box:not(:hover):not(:focus-within) {
background: transparent !important;
}
#searchbar:focus-within {
background: var(--urlbar-box-bgcolor);
}
#identity-box:not(.chromeUI) #identity-icon-label {
padding-inline-start: 8px !important;
}
#urlbar:not([extend='true']) #identity-box #identity-icon-box {
position: relative;
}
#urlbar:not([breakout-extend='true']) #identity-box {
margin-inline-end: 0 !important;
}
.urlbar-page-action,
#tracking-protection-icon-container {
padding: 0 !important;
justify-content: center !important;
align-items: center !important;
margin: 0;
:root[zen-single-toolbar='true'] & {
padding: 6px !important;
width: unset !important;
height: unset !important;
}
}
#tracking-protection-icon-container {
margin: 0 0 0 2px !important;
}
.urlbar-page-action,
#tracking-protection-icon-container {
margin-top: auto !important;
margin-bottom: auto !important;
}
#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box,
#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-permission-box {
margin-right: 0px !important;
}
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
#identity-icon-box {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-right: 0 !important;
}
#tracking-protection-icon-container,
#page-action-buttons {
order: 2 !important;
}
#urlbar[breakout] {
position: fixed;
}
#urlbar[breakout-extend='true'] #urlbar-background {
box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
backdrop-filter: none !important;
border-radius: 0.8rem !important;
}
#urlbar-go-button {
display: none;
}
:root[zen-single-toolbar='true'] {
--urlbar-icon-border-radius: 10px !important;
.urlbar-page-action:not([open]):not(#identity-permission-box),
#tracking-protection-icon-container {
display: none;
}
#identity-box:not([pageproxystate='invalid']) #identity-icon-box:not([open]) {
margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
transform: translateX(100%);
transition: all 0.1s ease;
opacity: 0;
}
#identity-permission-box > *:not(#permissions-granted-icon) {
visibility: collapse;
}
#identity-icon-label {
display: none;
}
#urlbar[open]
:is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button):not([hidden='true']):not(
#identity-permission-box
),
#urlbar:hover #identity-icon-box {
opacity: 1 !important;
margin-inline-start: 0 !important;
transform: none !important;
display: flex;
#urlbar:not(:hover) & {
transition: 0;
}
}
#urlbar:not([open]) #userContext-icons {
margin-inline: 0;
}
#urlbar:not([open]) {
#identity-box:not([pageproxystate='invalid']) {
order: 9;
}
}
#notification-popup-box:not([open]) {
margin-inline-start: calc(-10px - 2 * var(--urlbar-icon-padding));
opacity: 0;
transition: all 0.2s;
}
#notification-popup-box {
align-items: center;
justify-content: center;
height: unset !important;
background: transparent !important;
& > image {
margin-top: auto;
margin-bottom: auto;
height: 24px; /* double 12px */
width: 24px;
&:hover {
background: var(--toolbarbutton-hover-background);
border-radius: var(--toolbarbutton-border-radius);
overflow: visible;
}
}
}
}
:root:not([zen-single-toolbar='true']) {
#notification-popup-box {
border-radius: 999px;
margin: 0 4px 0 0 !important;
padding: 0 4px;
min-width: calc(var(--urlbar-min-height) - 4px - 4 * var(--urlbar-container-padding)) !important;
height: calc(var(--urlbar-min-height) - 4px - 4 * var(--urlbar-container-padding)) !important;
justify-content: center;
gap: 8px;
& > image {
padding: 0;
margin-top: auto;
margin-bottom: auto;
}
}
}
#urlbar[breakout-extend='true'] #notification-popup-box {
min-width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
}
button.popup-notification-dropmarker {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.panel-footer:has(button.popup-notification-dropmarker:not([hidden='true'])) button.popup-notification-secondary-button {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.searchbar-engine-one-off-item {
max-width: 28px;
min-width: 28px !important;
transition: background 0s;
justify-content: center;
}
#downloadsHistory {
margin-top: 5px;
}
#urlbar-container {
container: urlbar-container / inline-size;
z-index: 1;
}
@container urlbar-container (width < 350px) {
#userContext-icons {
transition: all 0.1s ease;
}
#userContext-label {
display: none;
}
#userContext-indicator {
margin-inline-end: 4px;
}
#urlbar:hover:not([breakout-extend='true']) #userContext-icons {
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
opacity: 0;
pointer-events: none;
}
}
@media (max-width: 550px) {
#urlbar-container {
width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
}
#nav-bar[downloadsbuttonshown] #urlbar-container,
#nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
}
#nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
width: 176px;
}
#identity-icon-box {
max-width: 70px;
}
#urlbar-zoom-button {
display: none;
}
}
/* Thanks to https://github.com/JLBlk!
* Checkout https://github.com/JLBlk/Zen-Themes/blob/main/SuperUrlBar/SuperUrlBar.css
*/
#notification-popup-box {
border-radius: 10px !important;
}
/* Border radius on hover */
#urlbar .urlbar-page-action,
#urlbar #tracking-protection-icon-container,
#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
border-radius: var(--urlbar-icon-border-radius) !important;
}
/* Extensions or similar */
#urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
border-radius: 10px !important;
}
/* Notification Stack */
.notificationbox-stack {
background: transparent;
&[notificationside='top'] {
position: fixed;
bottom: calc(var(--zen-element-separation) * 1.5);
right: calc(var(--zen-element-separation) * 1.5);
width: fit-content;
max-width: 30rem !important;
& notification-message {
background: color-mix(in srgb, var(--zen-colors-tertiary) 70%, transparent 30%);
backdrop-filter: blur(10px);
border: 1px solid var(--arrowpanel-border-color);
border-radius: var(--zen-border-radius);
&::before {
display: none;
}
}
}
}
#nav-bar,
#zen-sidebar-top-buttons {
min-height: var(--zen-toolbar-height) !important;
height: var(--zen-toolbar-height) !important;
max-height: var(--zen-toolbar-height) !important;
display: flex;
align-items: center;
}
:root:not([zen-single-toolbar='true']) {
&[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 */
#nav-bar-customization-target {
/* Don't grow if potentially-user-sized elements (like the searchbar or the
* bookmarks toolbar item list) are too wide. This forces them to flex to the
* available space as much as possible, see bug 1795260. */
min-width: 0;
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding);
/* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
> :is(toolbarbutton, toolbaritem):first-child,
> toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
padding-inline-start: 0;
}
}
/* TODO: Fix this for windows and macos */
/*.titlebar-button:last-child {
padding-right: var(--zen-element-separation) !important;
}*/
#urlbar {
& .search-panel-one-offs-header {
display: none;
}
& .search-panel-one-offs-container .searchbar-engine-one-off-item {
box-shadow: none;
}
}
#urlbar[open] {
z-index: 2;
--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: light-dark(
hsl(0, 0%, 100%),
color-mix(in srgb, hsl(0, 0%, 5%) 90%, var(--zen-colors-primary) 10%)
) !important;
@media (-prefers-color-scheme: dark) {
outline: 1px solid rgba(0, 0, 0, 0.3) !important;
}
}
}
:root[zen-single-toolbar='true'] {
#urlbar[open] {
min-width: min(90%, 40rem);
}
&[zen-right-side='true'] #urlbar[open]:not([zen-floating-urlbar='true']) {
right: 0;
}
}
#urlbar[open][zen-floating-urlbar='true'] {
z-index: 1000;
max-width: unset;
min-width: unset !important;
--urlbar-container-height: 55px !important;
--urlbar-margin-inline: 10px !important;
width: min(90%, 50rem) !important;
font-size: 1.15em !important;
@media (-moz-platform: macos) {
font-size: 1.5em !important;
width: min(90%, 60rem) !important;
}
top: 25vh !important;
transform: translateX(-50%);
left: 50% !important;
#urlbar-container:has(&) {
border-radius: 10px;
background: var(--toolbarbutton-hover-background);
}
}
@media not -moz-pref('zen.urlbar.show-protections-icon') {
#tracking-protection-icon-container {
display: none !important;
}
}
/* Code ~~stolen~~ taken inspiration from https://github.com/greeeen-dev/zen-arc-cmd-bar
*
* MIT License
*
* Copyright (c) 2024 green.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
**/
.urlbarView-title,
.urlbarView-title-separator,
.urlbarView-action,
.urlbarView-url {
margin-top: auto !important;
margin-bottom: auto !important;
}
.urlbarView-title {
font-size: 14px !important;
font-weight: 500 !important;
}
.urlbarView-url,
.urlbarView-title-separator::before {
font-size: 14px !important;
font-weight: 500 !important;
color: #aaa !important;
}
.urlbarView-favicon {
margin-left: 0 !important;
margin-right: 12px !important;
padding: 6px !important;
border-radius: 6px !important;
}
.urlbarView-row[has-action]:is([type='switchtab'], [type='remotetab'], [type='clipboard']) .urlbarView-action {
margin-left: auto !important;
margin-right: 0 !important;
}
.urlbarView-row {
.urlbarView-favicon {
transition: background-color 0.05s;
}
&:hover {
.urlbarView-favicon,
& {
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 5%, transparent 95%) !important;
}
.urlbarView-url,
.urlbarView-title-separator::before {
color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important;
}
}
}

261
src/browser/base/content/zen-styles/zen-welcome.css
View File

@@ -1,261 +0,0 @@
#zen-welcome,
#zen-welcome-start,
#zen-welcome-pages {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-moz-window-dragging: drag;
}
:root[zen-welcome-stage] #zen-sidebar-splitter {
display: none;
}
#zen-welcome-start {
flex-direction: column;
-moz-window-dragging: drag;
--zen-primary-color: light-dark(black, white);
#zen-welcome-start-button {
opacity: 0;
list-style-image: url(chrome://browser/skin/zen-icons/forward.svg);
position: absolute;
bottom: 10%;
}
#zen-welcome-title {
text-align: center;
font-size: 5rem;
line-height: 1.1;
max-width: 50%;
font-weight: 500;
white-space: nowrap;
& > span {
display: block;
opacity: 0;
}
}
}
#zen-welcome-pages {
-moz-window-dragging: no-drag;
opacity: 0;
justify-content: start;
align-items: start;
display: none;
background: var(--zen-branding-bg);
border-radius: 1em;
overflow: hidden;
position: relative;
width: 60%;
height: 60%;
box-shadow: var(--zen-big-shadow);
overflow: hidden;
/* Small screens */
@media (max-width: 1400px) {
width: 80%;
height: 80%;
}
@media (max-width: 1200px) {
width: 90%;
height: 90%;
}
@media (max-width: 1000px) {
width: 100%;
height: 100%;
border-radius: 0px;
}
#zen-welcome-page-sidebar {
flex-direction: column;
justify-content: space-between;
padding: 3.8rem;
width: 40%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
& #zen-welcome-heart {
width: 100%;
height: 100%;
opacity: 0;
color: currentColor;
fill: currentColor;
-moz-context-properties: fill, fill-opacity;
background-image: url(chrome://browser/skin/zen-icons/essential-add.svg);
background-size: 15%;
background-repeat: no-repeat;
background-position: center;
}
&[animate-heart] {
overflow: hidden;
}
}
#zen-welcome-page-sidebar-buttons {
flex-direction: column;
gap: 10px;
}
#zen-welcome-page-sidebar-content {
& h1 {
font-size: xx-large;
font-weight: 600;
margin-bottom: 1rem;
}
& p {
margin: 0 0 1.1rem 0;
color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
}
& > * {
transform: translate(300%);
}
}
& button {
justify-content: center;
align-items: center;
transform: translate(300%);
}
#zen-welcome-page-content {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
width: 60%;
max-width: 80rem;
height: 100%;
position: relative;
overflow: hidden;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
gap: 1.6rem;
& label {
opacity: 0;
transition:
scale 0.1s,
box-shadow 0.1s;
padding: 1.5rem 1.1rem;
border-radius: 0.6rem;
width: 50%;
gap: 0.8rem;
display: flex;
border: 2px solid var(--zen-colors-border);
background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
align-items: center;
&:hover {
box-shadow: var(--zen-big-shadow);
}
&:has(:checked) {
box-shadow: var(--zen-big-shadow);
border: 2px solid var(--zen-primary-color);
scale: 1.03;
}
}
#zen-welcome-workspace-colors-anchor {
width: 1px;
height: 1px;
}
#zen-welcome-initial-essentials-browser {
width: 70%;
height: 80%;
display: flex;
margin-left: auto;
margin-top: auto;
border-top-left-radius: 1.2em;
box-shadow: var(--zen-big-shadow);
background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2));
padding-right: 20%;
overflow: hidden;
opacity: 0;
border: 1px solid var(--zen-colors-border);
border-bottom-width: 0;
border-right-width: 0;
#zen-welcome-initial-essentials-browser-sidebar {
width: 100%;
padding: 1.4rem;
gap: 1.2rem;
background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
#zen-welcome-initial-essentials-browser-sidebar-win-buttons {
gap: 0.5rem;
align-items: center;
& > div {
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--zen-toolbar-element-bg);
}
}
#zen-welcome-initial-essentials-browser-sidebar-essentials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem 1.2rem;
visibility: visible;
& * {
visibility: visible;
}
& .extra-tab {
width: 100%;
height: 3rem;
border-radius: 0.8rem;
margin-top: 0.5rem;
background: var(--zen-toolbar-element-bg);
grid-column: span 3;
}
& .tabbrowser-tab {
--tab-min-height: 5rem !important;
min-width: 5rem !important;
transition: transform 0.1s;
position: relative;
&::after {
position: absolute;
content: '';
width: 1.6rem;
height: 1.6rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--zen-tab-icon);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
--border-radius-medium: 1rem;
&[visuallyselected] {
transform: scale(1.04);
}
& .tab-background::after {
filter: blur(30px) brightness(1.2);
}
}
}
}
}
}
}

494
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -1,494 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
@namespace html 'http://www.w3.org/1999/xhtml';
#zen-workspaces-button {
justify-content: center;
align-items: center;
display: flex;
font-size: x-small;
position: relative;
&[dont-show='true'] {
display: none !important;
}
--toolbarbutton-hover-background: transparent !important;
border-radius: var(--zen-button-border-radius) !important;
background: transparent;
appearance: unset !important;
height: fit-content;
gap: 3px;
container-type: inline-size;
width: 100%;
& toolbarbutton {
margin: 0;
width: 25px;
display: flex;
justify-content: center;
padding: 0 !important;
align-items: center;
position: relative;
& .zen-workspace-icon[no-icon='true'] {
width: 6px;
height: 6px;
background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
border-radius: 50%;
}
filter: grayscale(1);
opacity: 0.5;
transition:
filter 0.2s,
opacity 0.2s,
width 0.1s;
&[active='true'],
&:hover {
filter: grayscale(0);
opacity: 1;
}
&:hover {
background-color: var(--zen-toolbar-element-bg);
}
}
&[overflow] {
gap: 0 !important;
& toolbarbutton {
margin: 0;
}
& toolbarbutton:not([active='true']),
&:has(toolbarbutton:hover) toolbarbutton[active='true'] {
&:not(:hover) {
width: min(var(--zen-overflowed-workspace-button-width), 25px);
&::after {
content: '';
position: absolute;
width: 4px;
border-radius: 99px;
height: 4px;
background: color-mix(
in srgb,
var(--zen-primary-color) 10%,
light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
);
left: 50%;
top: 50%;
filter: saturate(140%) brightness(110%) !important;
transform: translate(-50%, -50%);
}
& .zen-workspace-icon {
display: none;
}
}
}
}
}
#zen-workspaces-button .zen-workspace-sidebar-wrapper {
position: absolute;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
margin-left: 0.2rem;
display: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
}
/** Keep these selectors in sync with the ones in vertical-tabs.css */
#navigator-toolbox {
& #zen-workspaces-button .zen-workspace-sidebar-name {
display: block;
}
& #zen-workspaces-button .zen-workspace-sidebar-icon {
margin-inline-end: 5px;
}
& #zen-workspaces-button {
overflow: hidden;
display: flex;
gap: 0.5ch;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
}
}
/* Workspaces Panel UI */
#PanelUI-zen-workspaces {
--panel-width: 320px;
--panel-padding: 0;
}
#PanelUI-zen-workspaces > panelmultiview {
align-items: flex-start;
overflow-x: hidden;
overflow-y: auto;
}
#PanelUI-zen-workspaces panelmultiview panelview {
position: relative;
padding: 10px;
width: var(--panel-width);
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
border-radius: 7px;
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton[selected='true'] {
border-color: var(--zen-colors-secondary);
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-icon {
display: none;
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-text {
min-width: unset;
}
#PanelUI-zen-workspaces-icon-picker {
padding: 5px !important;
}
#PanelUI-zen-workspaces-icon-picker-wrapper {
overflow-x: hidden;
justify-items: center;
overflow-y: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
max-height: 250px;
.workspace-icon-button {
min-width: 24px;
min-height: 24px;
font-size: 16px;
margin: 2px;
padding: 4px;
}
}
#PanelUI-zen-workspaces-list {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
#PanelUI-zen-workspaces-list[empty='true'] {
font-weight: 600;
padding: 10px;
width: 100%;
text-align: start;
opacity: 0.5;
}
.PanelUI-zen-workspaces-user-create {
height: 100%;
.PanelUI-zen-workspaces-creation-wraper {
border-radius: 5px;
border: 1px solid var(--zen-colors-border);
margin-top: 10px;
& .PanelUI-zen-workspaces-icons-container {
padding: 10px 0;
min-width: 40px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--zen-colors-border);
margin-right: 2px;
}
& html|input {
border: none;
outline: none !important;
width: 100%;
}
}
}
/* Workspace icon picker styles */
#PanelUI-zen-workspaces-icon-picker-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 5px;
}
#PanelUI-zen-workspaces-icon-search-bar {
display: flex;
position: sticky;
top: 0;
background-color: inherit;
z-index: 1000;
padding: 8px;
width: 100%;
margin: 0;
box-sizing: border-box;
}
#PanelUI-zen-workspaces-icon-search-input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
border: 1px solid var(--panel-separator-color, #ccc);
border-radius: 4px;
box-sizing: border-box;
margin: 0;
}
#PanelUI-zen-workspaces-list toolbarbutton {
padding: 5px;
border-radius: var(--zen-button-border-radius);
margin-left: 0 !important;
margin-right: 0 !important;
display: flex;
align-items: center;
position: relative;
&:first-child {
margin-top: 10px;
}
& .zen-workspace-icon {
position: relative;
width: 30px;
height: 30px;
border-radius: var(--zen-button-border-radius);
margin-right: 10px;
border: 1px solid var(--zen-colors-border);
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
flex-shrink: 0;
}
&[data-usercontextid] .zen-workspace-icon {
border-color: color-mix(in srgb, var(--identity-tab-color) 40%, transparent 60%);
}
& > vbox:has(> .zen-workspace-name) {
overflow: hidden;
}
& .zen-workspace-name {
font-weight: 600;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
& .zen-workspace-container {
font-size: 12px;
opacity: 0.5;
font-weight: normal;
}
& .zen-workspace-actions,
.zen-workspace-actions-reorder-icon {
display: none;
margin: 0;
margin-left: auto !important;
}
&.zen-workspace-button[active='true'] {
position: relative;
}
&.zen-workspace-button[active='true'] .zen-workspace-icon::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -2px;
width: 2px;
height: 16px;
background-color: var(--toolbarbutton-icon-fill-attention);
border-radius: 5px;
}
}
.zen-workspace-button.dragging {
opacity: 0.5;
}
.zen-workspace-button.dragover::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--toolbarbutton-icon-fill-attention);
}
.zen-workspace-last-place-drop-target.dragover {
background-color: var(--toolbarbutton-icon-fill-attention);
}
#PanelUI-zen-workspaces-reorder-mode[active='true'] {
color: var(--toolbarbutton-icon-fill-attention) !important;
}
#PanelUI-zen-workspaces-list:not([reorder-mode='true']) toolbarbutton {
&:hover .zen-workspace-actions,
& .zen-workspace-actions[active='true'] {
display: flex;
}
}
#PanelUI-zen-workspaces-list[reorder-mode='true'] toolbarbutton {
.zen-workspace-actions-reorder-icon {
display: flex;
}
}
#PanelUI-zen-workspaces-list[reorder-mode='true'] .zen-workspace-last-place-drop-target {
display: block;
}
.zen-workspace-last-place-drop-target {
display: none;
height: 4px;
width: 100%;
border-radius: 5px;
}
#PanelUI-zen-workspaces-view > vbox:nth-child(2) {
margin-top: 10px;
}
#PanelUI-zen-workspaces-new,
#PanelUI-zen-workspaces-reorder-mode,
#PanelUI-zen-gradient-generator-color-custom-add {
min-height: 1px !important;
padding: 3px;
border-radius: 4px;
width: 24px;
height: 24px;
}
#PanelUI-zen-workspaces-create-footer,
#PanelUI-zen-workspaces-edit-footer {
padding-bottom: 0 !important;
margin-top: 10px;
margin-left: 0;
margin-bottom: 0 !important;
width: 100%;
}
#PanelUI-zen-workspaces-create-footer button[default='true'],
#PanelUI-zen-workspaces-edit-footer button[default='true'] {
width: 100%;
}
#PanelUI-zen-workspaces-header {
margin-right: auto;
}
/* Mark workspaces indicator */
#zen-current-workspace-indicator-container {
position: relative;
margin-bottom: var(--zen-workspace-indicator-height);
}
.zen-current-workspace-indicator {
padding: calc(15px + var(--zen-toolbox-padding)) calc(4px + var(--tab-inline-padding));
font-weight: 600;
position: absolute;
max-height: var(--zen-workspace-indicator-height);
min-height: var(--zen-workspace-indicator-height);
gap: var(--tab-icon-end-margin);
align-items: center;
flex-direction: row !important;
max-width: 100%;
width: 100%;
&::before {
border-radius: var(--border-radius-medium);
background: transparent;
transition: background 0.1s;
pointer-events: none;
content: '';
position: absolute;
top: var(--zen-toolbox-padding);
left: calc(var(--zen-toolbox-padding) / 2);
width: calc(100% - var(--zen-toolbox-padding));
height: calc(100% - var(--zen-toolbox-padding) * 2);
}
&:hover,
&[open='true'] {
&::before {
background: var(--tab-hover-background-color);
}
}
& .zen-current-workspace-indicator-icon {
font-size: 12px;
line-height: 1;
}
.zen-current-workspace-indicator-name {
opacity: 0.5;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
font-size: small;
}
}
@media not -moz-pref('zen.workspaces.show-workspace-indicator') {
#zen-current-workspace-indicator-container {
display: none !important;
}
}
#zen-current-workspace-indicator-container[hidden='true'] {
display: none !important;
}

4
src/browser/base/content/zen-tabbrowser-elements.inc.xhtml
View File

@@ -1,2 +1,2 @@
#include zen-splitview-overlay.inc.xhtml
#include zen-glance.inc.xhtml
#include ../../../zen/split-view/zen-splitview-overlay.inc.xhtml
#include ../../../zen/glance/zen-glance.inc.xhtml

7
src/browser/base/content/zen-vendor/motion.min.mjs
View File

File diff suppressed because one or more lines are too long

2
src/browser/base/content/zen-vendor/tsparticles.confetti.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

99
src/browser/base/content/zenThemeModifier.js
View File

@@ -1,99 +0,0 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
'use strict';
/* INCLUDE THIS FILE AS:
* <script src="chrome://browser/content/zenThemeModifier.js"></script>
*
* FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
*/
const kZenThemePrefsList = ['zen.theme.accent-color', 'zen.theme.border-radius', 'zen.theme.content-element-separation'];
const kZenMaxElementSeparation = 12;
/**
* ZenThemeModifier controls the application of theme data to the browser,
* for examplem, it injects the accent color to the document. This is used
* because we need a way to apply the accent color without having to worry about
* shadow roots not inheriting the accent color.
*
* note: It must be a firefox builtin page with access to the browser's configuration
* and services.
*/
var ZenThemeModifier = {
_inMainBrowserWindow: false,
/**
* Listen for theming updates from the LightweightThemeChild actor, and
* begin listening to changes in preferred color scheme.
*/
init() {
this._inMainBrowserWindow = window.location.href == 'chrome://browser/content/browser.xhtml';
this.listenForEvents();
this.updateAllThemeBasics();
},
listenForEvents() {
var handleEvent = this.handleEvent.bind(this);
// Listen for changes in the accent color and border radius
for (let pref of kZenThemePrefsList) {
Services.prefs.addObserver(pref, handleEvent);
}
window.addEventListener('unload', () => {
for (let pref of kZenThemePrefsList) {
Services.prefs.removeObserver(pref, handleEvent);
}
});
},
handleEvent(event) {
// note: even might be undefined, but we shoudnt use it!
this.updateAllThemeBasics();
},
/**
* Update all theme basics, like the accent color.
*/
async updateAllThemeBasics() {
this.updateAccentColor();
this.updateBorderRadius();
this.updateElementSeparation();
},
updateBorderRadius() {
const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius');
document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px');
},
updateElementSeparation() {
let separation = this.elementSeparation;
document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
if (separation == 0) {
document.documentElement.setAttribute('zen-no-padding', true);
} else {
document.documentElement.removeAttribute('zen-no-padding');
}
},
get elementSeparation() {
return Math.min(Services.prefs.getIntPref('zen.theme.content-element-separation'), kZenMaxElementSeparation);
},
/**
* Update the accent color.
*/
updateAccentColor() {
const accentColor = Services.prefs.getStringPref('zen.theme.accent-color');
document.documentElement.style.setProperty('--zen-primary-color', accentColor);
// Notify the page that the accent color has changed, only if a function
// handler is defined.
if (typeof window.zenPageAccentColorChanged === 'function') {
window.zenPageAccentColorChanged(accentColor);
}
},
};
if (typeof Services !== 'undefined') ZenThemeModifier.init();