mirror of
https://github.com/zen-browser/desktop.git
synced 2026-08-27 00:41:31 +00:00
Refactor CSS and JavaScript files for consistency; clean up whitespace and formatting
This commit is contained in:
mr. M
@@ -71,7 +71,7 @@ export var ZenCustomizableUI = new (class {
|
||||
_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) {
|
||||
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]);
|
||||
|
||||
@@ -28,13 +28,14 @@
|
||||
// Fix notification deck
|
||||
const deckTemplate = document.getElementById('tab-notification-deck-template');
|
||||
if (deckTemplate) {
|
||||
document
|
||||
.getElementById('zen-appcontent-navbar-container')
|
||||
.appendChild(deckTemplate);
|
||||
document.getElementById('zen-appcontent-navbar-container').appendChild(deckTemplate);
|
||||
}
|
||||
|
||||
// Disable smooth scroll
|
||||
gBrowser.tabContainer.arrowScrollbox.smoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
|
||||
gBrowser.tabContainer.arrowScrollbox.smoothScroll = Services.prefs.getBoolPref(
|
||||
'zen.startup.smooth-scroll-in-tabs',
|
||||
false
|
||||
);
|
||||
|
||||
ZenWorkspaces.init();
|
||||
gZenUIManager.init();
|
||||
|
||||
@@ -6,20 +6,18 @@ var gZenUIManager = {
|
||||
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, 'contentElementSeparation', 'zen.theme.content-element-separation', 0);
|
||||
|
||||
new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
|
||||
document.getElementById('tabbrowser-tabs')
|
||||
);
|
||||
|
||||
new ResizeObserver(gZenCommonActions.throttle(gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager), this.sidebarHeightThrottle)).observe(
|
||||
document.getElementById('navigator-toolbox')
|
||||
);
|
||||
new ResizeObserver(
|
||||
gZenCommonActions.throttle(
|
||||
gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager),
|
||||
this.sidebarHeightThrottle
|
||||
)
|
||||
).observe(document.getElementById('navigator-toolbox'));
|
||||
},
|
||||
|
||||
updateTabsToolbar() {
|
||||
@@ -30,7 +28,7 @@ var gZenUIManager = {
|
||||
const toolbarRect = toolbarItems.getBoundingClientRect();
|
||||
let height = toolbarRect.height;
|
||||
// -5 for the controls padding
|
||||
let totalHeight = toolbarRect.height - (this.contentElementSeparation * 2) - 5;
|
||||
let totalHeight = toolbarRect.height - this.contentElementSeparation * 2 - 5;
|
||||
// remove the height from other elements that aren't hidden
|
||||
const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
|
||||
for (let tab of otherElements) {
|
||||
@@ -83,7 +81,10 @@ var gZenUIManager = {
|
||||
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'))) {
|
||||
if (
|
||||
!el.contains(showEvent.explicitOriginalTarget) ||
|
||||
(showEvent.explicitOriginalTarget instanceof Element && showEvent.explicitOriginalTarget?.closest('panel'))
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
document.removeEventListener('mousemove', this.__removeHasPopupAttribute);
|
||||
@@ -115,8 +116,11 @@ var gZenVerticalTabsManager = {
|
||||
this._multiWindowFeature = new ZenMultiWindowFeature();
|
||||
|
||||
ChromeUtils.defineLazyGetter(this, 'isWindowsStyledButtons', () => {
|
||||
return !(window.AppConstants.platform === 'macosx' || window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches
|
||||
|| Services.prefs.getBoolPref('zen.view.experimental-force-window-controls-left'));
|
||||
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', () => {
|
||||
@@ -144,7 +148,7 @@ var gZenVerticalTabsManager = {
|
||||
XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
|
||||
|
||||
if (!this.isWindowsStyledButtons) {
|
||||
document.documentElement.setAttribute("zen-window-buttons-reversed", true);
|
||||
document.documentElement.setAttribute('zen-window-buttons-reversed', true);
|
||||
}
|
||||
|
||||
if (tabs) {
|
||||
@@ -199,9 +203,9 @@ var gZenVerticalTabsManager = {
|
||||
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 = !this.isWindowsStyledButtons
|
||||
? document.querySelector('.titlebar-buttonbox-container') // TODO: test if it works 100% of the time
|
||||
: document.querySelector('#nav-bar .titlebar-buttonbox-container');
|
||||
}
|
||||
return this.__actualWindowButtons;
|
||||
},
|
||||
@@ -225,44 +229,20 @@ var gZenVerticalTabsManager = {
|
||||
initializePreferences(updateEvent) {
|
||||
XPCOMUtils.defineLazyPreferenceGetter(
|
||||
this,
|
||||
"_prefsCompactMode",
|
||||
"zen.view.compact",
|
||||
'_prefsCompactMode',
|
||||
'zen.view.compact',
|
||||
false
|
||||
// no need to update the event, it's handled by the compact mode manager
|
||||
);
|
||||
|
||||
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,
|
||||
"_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",
|
||||
'_prefsSidebarExpandedMaxWidth',
|
||||
'zen.view.sidebar-expanded.max-width',
|
||||
300,
|
||||
updateEvent
|
||||
);
|
||||
@@ -276,17 +256,17 @@ var gZenVerticalTabsManager = {
|
||||
try {
|
||||
this._updateMaxWidth();
|
||||
|
||||
window.docShell.treeOwner
|
||||
.QueryInterface(Ci.nsIInterfaceRequestor)
|
||||
.getInterface(Ci.nsIAppWindow)
|
||||
.rollupAllPopups();
|
||||
window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups();
|
||||
|
||||
const topButtons = document.getElementById('zen-sidebar-top-buttons');
|
||||
const isCompactMode = this._prefsCompactMode && !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 isSingleToolbar =
|
||||
((this._prefsUseSingleToolbar && isVerticalTabs && isSidebarExpanded) || !isVerticalTabs) &&
|
||||
!forCustomizableMode &&
|
||||
!this.hidesTabsToolbar;
|
||||
const titlebar = document.getElementById('titlebar');
|
||||
|
||||
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
|
||||
@@ -311,10 +291,12 @@ var gZenVerticalTabsManager = {
|
||||
|
||||
const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
|
||||
let shouldHide = false;
|
||||
if (((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)
|
||||
|| (
|
||||
isCompactMode && isSingleToolbar && this.isWindowsStyledButtons
|
||||
)) && isSingleToolbar) {
|
||||
if (
|
||||
((!isRightSide && this.isWindowsStyledButtons) ||
|
||||
(isRightSide && !this.isWindowsStyledButtons) ||
|
||||
(isCompactMode && isSingleToolbar && this.isWindowsStyledButtons)) &&
|
||||
isSingleToolbar
|
||||
) {
|
||||
appContentNavbarContaienr.setAttribute('should-hide', 'true');
|
||||
shouldHide = true;
|
||||
} else {
|
||||
@@ -322,10 +304,7 @@ var gZenVerticalTabsManager = {
|
||||
}
|
||||
|
||||
// Check if the sidebar is in hover mode
|
||||
if (
|
||||
!this.navigatorToolbox.hasAttribute('zen-right-side') &&
|
||||
!isCompactMode
|
||||
) {
|
||||
if (!this.navigatorToolbox.hasAttribute('zen-right-side') && !isCompactMode) {
|
||||
this.navigatorToolbox.prepend(topButtons);
|
||||
}
|
||||
|
||||
@@ -335,7 +314,9 @@ var gZenVerticalTabsManager = {
|
||||
|
||||
if (isSingleToolbar) {
|
||||
this._navbarParent = navBar.parentElement;
|
||||
let elements = document.querySelectorAll('#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container)');
|
||||
let elements = document.querySelectorAll(
|
||||
'#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container)'
|
||||
);
|
||||
elements = Array.from(elements).reverse();
|
||||
// Add separator if it doesn't exist
|
||||
if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
|
||||
@@ -356,18 +337,20 @@ var gZenVerticalTabsManager = {
|
||||
titlebar.before(topButtons);
|
||||
titlebar.before(navBar);
|
||||
}
|
||||
document.documentElement.setAttribute("zen-single-toolbar", true);
|
||||
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)');
|
||||
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");
|
||||
document.documentElement.removeAttribute('zen-single-toolbar');
|
||||
navBar.appendChild(document.getElementById('PanelUI-button'));
|
||||
this._toolbarOriginalParent.prepend(navBar);
|
||||
if (!dontRebuildAreas) {
|
||||
@@ -398,7 +381,7 @@ var gZenVerticalTabsManager = {
|
||||
if (isRightSide && !isSidebarExpanded) {
|
||||
navBar.appendChild(windowButtons);
|
||||
} else {
|
||||
document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons);
|
||||
document.getElementById('zen-sidebar-top-buttons-customization-target').appendChild(windowButtons);
|
||||
}
|
||||
} else if (!isSingleToolbar && !isCompactMode) {
|
||||
if (this.isWindowsStyledButtons) {
|
||||
@@ -407,7 +390,8 @@ var gZenVerticalTabsManager = {
|
||||
} else {
|
||||
navBar.append(windowButtons);
|
||||
}
|
||||
} else { // not windows styled buttons
|
||||
} else {
|
||||
// not windows styled buttons
|
||||
if (isRightSide || !isSidebarExpanded) {
|
||||
navBar.prepend(windowButtons);
|
||||
} else {
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
transform: translateY(-25px);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.8 ;
|
||||
opacity: 0.8;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
100% {
|
||||
|
||||
@@ -24,6 +24,6 @@
|
||||
font-feature-settings: 'swsh' 1;
|
||||
|
||||
& .zen-branding-title-italic {
|
||||
font-family: "Zen-Junicode-Italic", serif;
|
||||
font-family: 'Zen-Junicode-Italic', serif;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
position: relative;
|
||||
|
||||
/* For glance */
|
||||
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||||
transition:
|
||||
transform 0.1s ease-in-out,
|
||||
opacity 0.1s ease-in-out;
|
||||
|
||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
|
||||
overflow: hidden;
|
||||
@@ -20,11 +22,11 @@
|
||||
margin-left: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
:root[zen-no-padding='true'] &:not([zen-split="true"]) {
|
||||
:root[zen-no-padding='true'] &:not([zen-split='true']) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
|
||||
#tabbrowser-tabpanels {
|
||||
mix-blend-mode: multiply;
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
&[animating='true']::after {
|
||||
background: var(--zen-main-browser-background-old);
|
||||
backdrop-filter: blur(5px);
|
||||
animation: zen-main-app-wrapper-animation .6s ease forwards;
|
||||
animation: zen-main-app-wrapper-animation 0.6s ease forwards;
|
||||
transition: 0s;
|
||||
}
|
||||
}
|
||||
@@ -99,7 +99,6 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@supports (-moz-osx-font-smoothing: auto) {
|
||||
#zen-main-app-wrapper,
|
||||
#zen-appcontent-wrapper,
|
||||
|
||||
@@ -48,7 +48,10 @@
|
||||
&:not([animate='true']) {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: left 0.25s ease, right 0.25s ease, opacity 1.5s ease;
|
||||
transition:
|
||||
left 0.25s ease,
|
||||
right 0.25s ease,
|
||||
opacity 1.5s ease;
|
||||
top: 0;
|
||||
bottom: var(--zen-element-separation);
|
||||
opacity: 0;
|
||||
@@ -124,9 +127,13 @@
|
||||
#navigator-toolbox[has-popup-menu],
|
||||
#navigator-toolbox[movingtab],
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)) {
|
||||
#navigator-toolbox:has(
|
||||
*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
|
||||
) {
|
||||
&:not([animate='true']) {
|
||||
transition: left 0.25s ease, right 0.25s ease;
|
||||
transition:
|
||||
left 0.25s ease,
|
||||
right 0.25s ease;
|
||||
opacity: 1;
|
||||
|
||||
left: -1px;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
#zen-splitview-dropzone {
|
||||
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
|
||||
transition: inset ease-out .08s;
|
||||
transition: inset ease-out 0.08s;
|
||||
display: none;
|
||||
background-color: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%);
|
||||
}
|
||||
@@ -25,7 +25,8 @@
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'], #zen-splitview-dropzone {
|
||||
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'],
|
||||
#zen-splitview-dropzone {
|
||||
flex: 1;
|
||||
margin: calc(var(--zen-split-column-gap) / 2) calc(var(--zen-split-row-gap) / 2 + 1px) !important;
|
||||
margin-bottom: 0 !important;
|
||||
@@ -51,7 +52,7 @@
|
||||
|
||||
#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
|
||||
--zen-split-row-gap: calc(var(--zen-element-separation) + 1px);
|
||||
--zen-split-column-gap: calc(var(--zen-element-separation)*3 + 1px);
|
||||
--zen-split-column-gap: calc(var(--zen-element-separation) * 3 + 1px);
|
||||
margin-right: calc(-1 * var(--zen-split-column-gap));
|
||||
|
||||
:root[zen-right-side='true'] & {
|
||||
@@ -60,12 +61,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels:has(> [zen-split='true']), #zen-splitview-overlay {
|
||||
margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap)/2);
|
||||
margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap)/2);
|
||||
#tabbrowser-tabpanels:has(> [zen-split='true']),
|
||||
#zen-splitview-overlay {
|
||||
margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap) / 2);
|
||||
margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap) / 2);
|
||||
|
||||
margin-left: calc(var(--zen-split-row-gap)/-2);
|
||||
margin-top: calc(var(--zen-split-column-gap)/-2);
|
||||
margin-left: calc(var(--zen-split-row-gap) / -2);
|
||||
margin-top: calc(var(--zen-split-column-gap) / -2);
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact') {
|
||||
:root:not([customizing]) & {
|
||||
@@ -112,7 +114,6 @@
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
.zen-split-view-splitter[orient='vertical'] {
|
||||
width: var(--zen-split-row-gap);
|
||||
margin-left: calc(var(--zen-split-row-gap) / -2);
|
||||
@@ -181,7 +182,7 @@
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: .1s;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
&:hover box {
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
& .browserContainer {
|
||||
opacity: 1;
|
||||
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
|
||||
animation: zen-glance-content-animation-out 0.3s ease-in-out forwards !important;
|
||||
|
||||
& browser {
|
||||
opacity: 1 !important;
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease-in-out;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -118,7 +118,7 @@
|
||||
}
|
||||
|
||||
&[animate='true'] {
|
||||
animation: zen-glance-content-animation .4s ease-in-out forwards;
|
||||
animation: zen-glance-content-animation 0.4s ease-in-out forwards;
|
||||
|
||||
&:not([animate-end='true']) {
|
||||
pointer-events: none;
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
bottom: 2px;
|
||||
right: 0;
|
||||
border: 2px solid var(--zen-colors-border);
|
||||
transition: transform .2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&[dragging='true']::after {
|
||||
@@ -152,7 +152,7 @@
|
||||
padding: 2px 4px !important;
|
||||
margin: 0 !important;
|
||||
margin-left: auto !important;
|
||||
transition: opacity .1s;
|
||||
transition: opacity 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -246,8 +246,8 @@
|
||||
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
|
||||
cursor: pointer;
|
||||
border: 2px solid #fff;
|
||||
animation: zen-theme-picker-dot-animation .5s;
|
||||
transition: transform .2s;
|
||||
animation: zen-theme-picker-dot-animation 0.5s;
|
||||
transition: transform 0.2s;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&[dragging='true'] {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
panel[type='arrow'][animate][animate='open']::part(content) {
|
||||
animation: zen-jello-animation .35s ease;
|
||||
animation: zen-jello-animation 0.35s ease;
|
||||
}
|
||||
|
||||
panel[type='arrow'][animate]:not([animate='open'])::part(content) {
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
|
||||
.printSettingsBrowser {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
@@ -341,6 +341,6 @@ menuitem {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#editBMPanel_workspaceList input[type="checkbox"] {
|
||||
#editBMPanel_workspaceList input[type='checkbox'] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
#zen-rice-share-dialog-overlay:not([hidden]) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -17,15 +16,15 @@
|
||||
color: var(--panel-color);
|
||||
background: var(--arrowpanel-background);
|
||||
border-radius: var(--zen-panel-radius);
|
||||
box-shadow: 0 0 1px 1px hsla(0,0%,0%,.2);;
|
||||
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(.77,0,.18,1);
|
||||
&[animate='true'] {
|
||||
animation: zen-rice-submit-animation 1s cubic-bezier(0.77, 0, 0.18, 1);
|
||||
}
|
||||
|
||||
& .zen-rice-share-content {
|
||||
@@ -47,7 +46,7 @@
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
& #zen-rice-share-first-form input[type="text"] {
|
||||
& #zen-rice-share-first-form input[type='text'] {
|
||||
width: 100%;
|
||||
padding: 1px 2px;
|
||||
border: 0;
|
||||
@@ -78,8 +77,10 @@
|
||||
|
||||
max-height: 30px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, height 0.3s ease;
|
||||
&[zen-collapsed="false"] {
|
||||
transition:
|
||||
max-height 0.3s ease,
|
||||
height 0.3s ease;
|
||||
&[zen-collapsed='false'] {
|
||||
max-height: 350px;
|
||||
}
|
||||
|
||||
@@ -106,7 +107,7 @@
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&[zen-collapsed="false"] > .options-header image {
|
||||
&[zen-collapsed='false'] > .options-header image {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@@ -162,7 +163,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@@ -101,7 +101,7 @@
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter,
|
||||
.zen-split-view-splitter[orient="vertical"] {
|
||||
.zen-split-view-splitter[orient='vertical'] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -131,7 +131,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.zen-split-view-splitter[orient="vertical"]::before {
|
||||
.zen-split-view-splitter[orient='vertical']::before {
|
||||
transform: translate(-75%, -50%);
|
||||
}
|
||||
|
||||
@@ -256,7 +256,7 @@
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-title {
|
||||
font-size: .9em;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
padding: 0;
|
||||
@@ -316,4 +316,3 @@
|
||||
#zen-sidebar-web-panel[hidden] {
|
||||
animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -78,4 +78,4 @@
|
||||
/* Menubar */
|
||||
#toolbar-menubar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,6 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
body > #confetti {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -9,126 +9,124 @@
|
||||
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;
|
||||
}
|
||||
|
||||
& #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;
|
||||
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;
|
||||
--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;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container,
|
||||
#vertical-pinned-tabs-container,
|
||||
#tabbrowser-arrowscrollbox {
|
||||
-webkit-box-flex: 1;
|
||||
-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;
|
||||
-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;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
flex-direction: row !important;
|
||||
width: 100%;
|
||||
height: 36px !important;
|
||||
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;
|
||||
--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;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container .tabbrowser-tab {
|
||||
width: 0% !important;
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tabbrowser-tab {
|
||||
width: 0% !important;
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[zen-glance-tab="true"] {
|
||||
|
||||
.tab-label-container {
|
||||
display: none !important;
|
||||
width: 0px !important;
|
||||
max-width: 0px !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;
|
||||
display: flex !important;
|
||||
max-width: -moz-available;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
#TabsToolbar {
|
||||
flex-direction: row !important;
|
||||
gap: 8px;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
gap: 8px;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target {
|
||||
flex-direction: row !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[orient="vertical"] {
|
||||
flex-direction: row !important;
|
||||
#tabbrowser-tabs[orient='vertical'] {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
tabs {
|
||||
flex-direction: row !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container {
|
||||
container-name: tab-container;
|
||||
container-type: normal;
|
||||
max-width: 36px !important;
|
||||
flex: 1 1 36px !important;
|
||||
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;
|
||||
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;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tab-reset-button {
|
||||
@@ -136,11 +134,11 @@
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tab-label-container {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tab-icon-image {
|
||||
margin: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
@@ -162,131 +160,131 @@
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
.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-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;
|
||||
& .tab-content {
|
||||
justify-content: space-around !important;
|
||||
padding: 0 !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;
|
||||
}
|
||||
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%);
|
||||
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;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels {
|
||||
padding-left: var(--zen-element-separation) !important;
|
||||
padding-left: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
#appcontent * {
|
||||
overflow: visible !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target::after {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-icons-wrapper {
|
||||
width: auto !important;
|
||||
padding: 0 !important;
|
||||
width: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Height Adjustments */
|
||||
#vertical-pinned-tabs-container,
|
||||
#zen-essentials-container,
|
||||
#tabbrowser-arrowscrollbox {
|
||||
max-height: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-gradient-generator {
|
||||
min-width: 390px !important;
|
||||
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;
|
||||
-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;
|
||||
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;
|
||||
position: relative;
|
||||
display: -webkit-box !important;
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox {
|
||||
margin-left: 0 !important;
|
||||
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;
|
||||
-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 {
|
||||
@@ -299,39 +297,39 @@
|
||||
}
|
||||
|
||||
hbox#nav-bar-customization-target toolbarbutton.chromeclass-toolbar-additional:nth-of-type(1) {
|
||||
padding-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
padding-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
}
|
||||
|
||||
toolbar#PersonalToolbar {
|
||||
padding-left: 6px !important;
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
|
||||
.tab-context-line {
|
||||
width: 100% !important;
|
||||
height: 3px !important;
|
||||
width: 100% !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[zen-glance-tab="true"] {
|
||||
flex-basis: fit-content !important;
|
||||
max-width: 36px !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;
|
||||
#zen-essentials-container .tabbrowser-tab[zen-glance-tab='true'] {
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container .tabbrowser-tab[zen-glance-tab="true"] {
|
||||
position: absolute !important;
|
||||
#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;
|
||||
-webkit-box-flex: 0 !important;
|
||||
min-width: min-content;
|
||||
width: auto !important;
|
||||
|
||||
.toolbarbutton-text {
|
||||
display: none !important;
|
||||
}
|
||||
.toolbarbutton-text {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,9 @@ height: var(--zen-toolbar-height);
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
|
||||
& {
|
||||
transition: height 0.15s ease, opacity 0.1s ease-out;
|
||||
transition:
|
||||
height 0.15s ease,
|
||||
opacity 0.1s ease-out;
|
||||
transition-delay: 0.2s;
|
||||
|
||||
& > * {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* 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
|
||||
/* 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.
|
||||
*/
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
/* Branding */
|
||||
--zen-branding-dark: #202020;
|
||||
--zen-branding-coral: #F76F53;
|
||||
--zen-branding-coral: #f76f53;
|
||||
--zen-branding-paper: #ebebeb;
|
||||
|
||||
--zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark));
|
||||
@@ -43,9 +43,21 @@
|
||||
|
||||
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
|
||||
|
||||
--in-content-primary-button-background: color-mix(in srgb, var(--zen-primary-color) 10%, var(--zen-branding-bg) 90%) !important;
|
||||
--in-content-primary-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 15%, var(--zen-branding-bg) 85%) !important;
|
||||
--in-content-primary-button-background-active: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-branding-bg) 80%) !important;
|
||||
--in-content-primary-button-background: color-mix(
|
||||
in srgb,
|
||||
var(--zen-primary-color) 10%,
|
||||
var(--zen-branding-bg) 90%
|
||||
) !important;
|
||||
--in-content-primary-button-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--zen-primary-color) 15%,
|
||||
var(--zen-branding-bg) 85%
|
||||
) !important;
|
||||
--in-content-primary-button-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--zen-primary-color) 20%,
|
||||
var(--zen-branding-bg) 80%
|
||||
) !important;
|
||||
--button-text-color-primary: var(--zen-branding-bg-reverse) !important;
|
||||
--in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
|
||||
--in-content-primary-button-border-color: transparent !important;
|
||||
@@ -91,10 +103,7 @@
|
||||
--zen-button-border-radius: 5px;
|
||||
--zen-button-padding: 0.6rem 1.2rem;
|
||||
|
||||
--zen-toolbar-element-bg: light-dark(
|
||||
rgba(255, 255, 255, 0.4),
|
||||
rgba(170, 170, 170, 0.2)
|
||||
);
|
||||
--zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.4), rgba(170, 170, 170, 0.2));
|
||||
|
||||
/* Toolbar */
|
||||
--zen-toolbar-height: 38px;
|
||||
@@ -137,7 +146,10 @@
|
||||
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
|
||||
--toolbar-bgcolor: transparent;
|
||||
|
||||
--toolbarbutton-active-background: light-dark(rgba(255, 255, 255, .9), color-mix(in srgb, var(--zen-primary-color) 50%, rgba(255, 255, 255, .1)));
|
||||
--toolbarbutton-active-background: light-dark(
|
||||
rgba(255, 255, 255, 0.9),
|
||||
color-mix(in srgb, var(--zen-primary-color) 50%, rgba(255, 255, 255, 0.1))
|
||||
);
|
||||
|
||||
--input-bgcolor: var(--zen-colors-tertiary) !important;
|
||||
--input-border-color: var(--zen-input-border-color) !important;
|
||||
@@ -147,13 +159,16 @@
|
||||
@media (-moz-windows-mica) or (-moz-platform: macos) {
|
||||
background: transparent;
|
||||
--zen-themed-toolbar-bg-transparency: 0;
|
||||
--zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)), rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency)));
|
||||
--zen-themed-toolbar-bg-transparent: light-dark(
|
||||
rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)),
|
||||
rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency))
|
||||
);
|
||||
}
|
||||
|
||||
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;
|
||||
--arrowpanel-background: var(--zen-dialog-background) !important;
|
||||
|
||||
--tab-selected-shadow: 0 0 1px 1px rgba(0,0,0,.1) !important;
|
||||
--tab-selected-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
outline-color: none !important;
|
||||
}
|
||||
|
||||
#identity-box.chromeUI:not([pageproxystate="invalid"]) {
|
||||
#identity-box.chromeUI:not([pageproxystate='invalid']) {
|
||||
& #identity-icon-box {
|
||||
background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
|
||||
}
|
||||
@@ -125,7 +125,6 @@
|
||||
}
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
|
||||
.urlbar-page-action:not(#star-button-box):not([open]),
|
||||
#tracking-protection-icon-container {
|
||||
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
|
||||
@@ -437,7 +436,10 @@ button.popup-notification-dropmarker {
|
||||
* 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 {
|
||||
.urlbarView-title,
|
||||
.urlbarView-title-separator,
|
||||
.urlbarView-action,
|
||||
.urlbarView-url {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
@@ -447,7 +449,8 @@ button.popup-notification-dropmarker {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.urlbarView-url, .urlbarView-title-separator::before {
|
||||
.urlbarView-url,
|
||||
.urlbarView-title-separator::before {
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #aaa !important;
|
||||
@@ -460,7 +463,7 @@ button.popup-notification-dropmarker {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) .urlbarView-action {
|
||||
.urlbarView-row[has-action]:is([type='switchtab'], [type='remotetab'], [type='clipboard']) .urlbarView-action {
|
||||
margin-left: auto !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@@ -477,7 +480,8 @@ button.popup-notification-dropmarker {
|
||||
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;
|
||||
}
|
||||
|
||||
.urlbarView-url, .urlbarView-title-separator::before {
|
||||
.urlbarView-url,
|
||||
.urlbarView-title-separator::before {
|
||||
color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -266,7 +266,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Workspace icon picker styles */
|
||||
#PanelUI-zen-workspaces-icon-picker-wrapper {
|
||||
display: flex;
|
||||
@@ -391,7 +390,6 @@
|
||||
background-color: var(--toolbarbutton-icon-fill-attention);
|
||||
}
|
||||
|
||||
|
||||
#PanelUI-zen-workspaces-reorder-mode[active='true'] {
|
||||
color: var(--toolbarbutton-icon-fill-attention) !important;
|
||||
}
|
||||
@@ -476,7 +474,7 @@
|
||||
max-width: calc(100% - var(--zen-toolbox-padding) * 4);
|
||||
}
|
||||
|
||||
& #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {
|
||||
& #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,9 +76,9 @@ var ZenThemeModifier = {
|
||||
const separation = Services.prefs.getIntPref('zen.theme.content-element-separation');
|
||||
document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
|
||||
if (separation == 0) {
|
||||
document.documentElement.setAttribute("zen-no-padding", true);
|
||||
document.documentElement.setAttribute('zen-no-padding', true);
|
||||
} else {
|
||||
document.documentElement.removeAttribute("zen-no-padding");
|
||||
document.documentElement.removeAttribute('zen-no-padding');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user