mirror of
https://github.com/zen-browser/desktop.git
synced 2026-04-29 02:34:18 +00:00
Made the code look cleaner
This commit is contained in:
mauro-balades
@@ -1,28 +1,21 @@
|
||||
|
||||
export var ZenCustomizableUI = new class {
|
||||
export var ZenCustomizableUI = new (class {
|
||||
constructor() {}
|
||||
|
||||
TYPE_TOOLBAR = 'toolbar';
|
||||
defaultSidebarIcons = [
|
||||
'zen-sidepanel-button',
|
||||
'zen-workspaces-button',
|
||||
'new-tab-button'
|
||||
];
|
||||
defaultSidebarIcons = ['zen-sidepanel-button', 'zen-workspaces-button', 'new-tab-button'];
|
||||
|
||||
startup(CustomizableUIInternal) {
|
||||
CustomizableUIInternal.registerArea(
|
||||
"zen-sidebar-top-buttons",
|
||||
'zen-sidebar-top-buttons',
|
||||
{
|
||||
type: this.TYPE_TOOLBAR,
|
||||
defaultPlacements: [
|
||||
"preferences-button", "zen-expand-sidebar-button", "zen-profile-button"
|
||||
],
|
||||
defaultPlacements: ['preferences-button', 'zen-expand-sidebar-button', 'zen-profile-button'],
|
||||
defaultCollapsed: null,
|
||||
},
|
||||
true
|
||||
);
|
||||
CustomizableUIInternal.registerArea(
|
||||
"zen-sidebar-icons-wrapper",
|
||||
'zen-sidebar-icons-wrapper',
|
||||
{
|
||||
type: this.TYPE_TOOLBAR,
|
||||
defaultPlacements: this.defaultSidebarIcons,
|
||||
@@ -92,7 +85,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") {
|
||||
if (window.AppConstants.platform === 'macosx') {
|
||||
for (let i = 0; i < windowControls.length; i++) {
|
||||
if (i === 0) {
|
||||
toolboxIcons.prepend(windowControls[i]);
|
||||
@@ -104,9 +97,7 @@ export var ZenCustomizableUI = new class {
|
||||
}
|
||||
|
||||
_hideToolbarButtons(window) {
|
||||
const elementsToHide = [
|
||||
'alltabs-button',
|
||||
];
|
||||
const elementsToHide = ['alltabs-button'];
|
||||
for (let id of elementsToHide) {
|
||||
const elem = window.document.getElementById(id);
|
||||
if (elem) {
|
||||
@@ -116,11 +107,7 @@ export var ZenCustomizableUI = new class {
|
||||
}
|
||||
|
||||
registerToolbarNodes(window) {
|
||||
window.CustomizableUI.registerToolbarNode(
|
||||
window.document.getElementById('zen-sidebar-top-buttons')
|
||||
);
|
||||
window.CustomizableUI.registerToolbarNode(
|
||||
window.document.getElementById('zen-sidebar-icons-wrapper')
|
||||
);
|
||||
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
|
||||
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-icons-wrapper'));
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
},
|
||||
|
||||
_initSearchBar() {
|
||||
// Only focus the url bar
|
||||
// Only focus the url bar
|
||||
gURLBar.focus();
|
||||
|
||||
gURLBar._initCopyCutController();
|
||||
@@ -147,7 +147,7 @@
|
||||
Note: This developer console is not the same as the browser console, it has access to Zen's internal functions and variables, including your passwords and other sensitive information. Please do not paste any code here unless you know what you are doing.
|
||||
|
||||
`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
ZenStartup.init();
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
var gZenUIManager = {
|
||||
_popupTrackingElements: [],
|
||||
|
||||
init () {
|
||||
|
||||
init() {
|
||||
document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
|
||||
document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
|
||||
},
|
||||
@@ -67,7 +66,7 @@ var gZenUIManager = {
|
||||
element.removeAttribute('has-popup-menu');
|
||||
} else {
|
||||
this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu');
|
||||
document.addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true});
|
||||
document.addEventListener('mousemove', this.__removeHasPopupAttribute, { once: true });
|
||||
}
|
||||
this.__currentPopup = null;
|
||||
this.__currentPopupTrackElement = null;
|
||||
@@ -85,23 +84,18 @@ var gZenVerticalTabsManager = {
|
||||
this._updateEvent();
|
||||
this.initRightSideOrderContextMenu();
|
||||
|
||||
let tabs = document.getElementById("tabbrowser-tabs");
|
||||
let tabs = document.getElementById('tabbrowser-tabs');
|
||||
|
||||
XPCOMUtils.defineLazyPreferenceGetter(
|
||||
this,
|
||||
"canOpenTabOnMiddleClick",
|
||||
"zen.tabs.newtab-on-middle-click",
|
||||
true
|
||||
);
|
||||
XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
|
||||
|
||||
if (tabs) {
|
||||
tabs.addEventListener("mouseup", this.openNewTabOnTabsMiddleClick.bind(this));
|
||||
tabs.addEventListener('mouseup', this.openNewTabOnTabsMiddleClick.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
openNewTabOnTabsMiddleClick(event) {
|
||||
if (event.button === 1 && event.target.id === "tabbrowser-tabs" && this.canOpenTabOnMiddleClick) {
|
||||
document.getElementById("cmd_newNavigatorTabNoEvent").doCommand();
|
||||
if (event.button === 1 && event.target.id === 'tabbrowser-tabs' && this.canOpenTabOnMiddleClick) {
|
||||
document.getElementById('cmd_newNavigatorTabNoEvent').doCommand();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
@@ -157,8 +151,12 @@ var gZenVerticalTabsManager = {
|
||||
this.navigatorToolbox.removeAttribute('zen-expanded');
|
||||
}
|
||||
|
||||
if (this.navigatorToolbox.hasAttribute('zen-expanded') && !this.navigatorToolbox.hasAttribute('zen-right-side')
|
||||
&& !Services.prefs.getBoolPref('zen.view.compact') && !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')) {
|
||||
if (
|
||||
this.navigatorToolbox.hasAttribute('zen-expanded') &&
|
||||
!this.navigatorToolbox.hasAttribute('zen-right-side') &&
|
||||
!Services.prefs.getBoolPref('zen.view.compact') &&
|
||||
!Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
|
||||
) {
|
||||
this.navigatorToolbox.prepend(topButtons);
|
||||
browser.prepend(this.navigatorToolbox);
|
||||
} else {
|
||||
|
||||
@@ -23,20 +23,15 @@
|
||||
</linkset>
|
||||
|
||||
<!-- Scripts used all over the browser -->
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("DOMContentLoaded", async () => {
|
||||
// Theme importer always needs to be loaded first
|
||||
await Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCommonUtils.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemesCommon.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemesImporter.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCompactMode.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenSidebarManager.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenTabUnloader.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspacesStorage.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenProfileDialogUI.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs");
|
||||
}, { once: true });
|
||||
</script>
|
||||
<script src="chrome://browser/content/zen-components/ZenCommonUtils.mjs" async="true"/>
|
||||
<script src="chrome://browser/content/zen-components/ZenThemesCommon.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenThemesImporter.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenCompactMode.mjs" />
|
||||
<script src="chrome://browser/content/ZenUIManager.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenSidebarManager.mjs"/>
|
||||
<script src="chrome://browser/content/zen-components/ZenTabUnloader.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenWorkspaces.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenWorkspacesStorage.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
|
||||
<script src="chrome://browser/content/zen-components/ZenProfileDialogUI.mjs" />
|
||||
<script src="chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs" />
|
||||
|
||||
Submodule src/browser/base/content/zen-components updated: 5822df61e5...76d22a1f15
@@ -99,7 +99,7 @@
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -128,7 +128,7 @@
|
||||
@keyframes zen-workspaces-button-active {
|
||||
from {
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: -2px;
|
||||
@@ -138,7 +138,7 @@
|
||||
@keyframes zen-workspaces-button-active-collapsed-left {
|
||||
from {
|
||||
left: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
left: -2px;
|
||||
@@ -148,7 +148,7 @@
|
||||
@keyframes zen-workspaces-button-active-collapsed-right {
|
||||
from {
|
||||
right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
right: -2px;
|
||||
|
||||
@@ -7,15 +7,14 @@
|
||||
|
||||
--uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border);
|
||||
|
||||
--uc-tweak-rounded-corners-shadow:
|
||||
0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color);
|
||||
--uc-tweak-rounded-corners-shadow: 0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color);
|
||||
|
||||
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||||
|
||||
/* Use pseudo element overlay to simulate rounded corners, similar to the
|
||||
* tab corners, fixes bug with backdrop-filter. */
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
padding-right: var(--zen-element-separation);
|
||||
padding-bottom: var(--zen-element-separation);
|
||||
|
||||
#browser:has(#navigator-toolbox[zen-right-side="true"]) & {
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
padding-right: 0;
|
||||
padding-left: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
height: calc(98% - var(--zen-element-separation));
|
||||
z-index: 9;
|
||||
background: var(--zen-themed-toolbar-bg) !important;
|
||||
box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
|
||||
border-top-right-radius: var(--zen-border-radius);
|
||||
border-bottom-right-radius: var(--zen-border-radius);
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
@@ -63,7 +63,7 @@
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox[zen-has-hover],
|
||||
#navigator-toolbox:focus-within,
|
||||
@@ -75,7 +75,7 @@
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
|
||||
opacity: 1;
|
||||
|
||||
|
||||
transform: translateX(calc(100% - var(--zen-element-separation)));
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
transform: translateX(calc(-100% + var(--zen-element-separation)));
|
||||
@@ -84,7 +84,6 @@
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-top-align: var(--zen-element-separation);
|
||||
}
|
||||
@@ -100,7 +99,7 @@
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background: var(--zen-themed-toolbar-bg);
|
||||
box-shadow: 0 0 2px 2px rgba(0,0,0,.1) !important;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1) !important;
|
||||
border-bottom-left-radius: var(--zen-border-radius);
|
||||
border-bottom-right-radius: var(--zen-border-radius);
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
@@ -109,7 +108,7 @@
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
|
||||
:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) & {
|
||||
:root[tabsintitlebar][sizemode='normal']:not([gtktiledwindow='true']) & {
|
||||
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
border-left-width: 0;
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
* + 1 for the top margin, making the element overflow the view.
|
||||
* + 1 for the margin we want to add at the bottom
|
||||
* + 1 so that the panel can be correctly spaced from the border of the webview
|
||||
*/
|
||||
*/
|
||||
height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
|
||||
toolbar {
|
||||
min-height: 46px;
|
||||
}
|
||||
|
||||
#zen-profile-button {
|
||||
|
||||
& stack {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -19,7 +17,7 @@ toolbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
& > image {
|
||||
width: 0;
|
||||
}
|
||||
@@ -69,10 +67,10 @@ toolbar {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
|
||||
:root:has(#navigator-toolbox:not([zen-right-side='true'])) &[positionend="true"] {
|
||||
:root:has(#navigator-toolbox:not([zen-right-side='true'])) &[positionend='true'] {
|
||||
margin-right: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
|
||||
:root:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
margin-left: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@media (-moz-bool-pref: 'zen.tabs.vertical') {
|
||||
|
||||
#tabbrowser-tabs,
|
||||
#TabsToolbar,
|
||||
#titlebar,
|
||||
@@ -10,7 +9,6 @@
|
||||
|
||||
#TabsToolbar > * {
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
#private-browsing-indicator-with-label {
|
||||
@@ -39,8 +37,8 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.titlebar-spacer[type="pre-tabs"],
|
||||
.titlebar-spacer[type="post-tabs"] {
|
||||
.titlebar-spacer[type='pre-tabs'],
|
||||
.titlebar-spacer[type='post-tabs'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -66,7 +64,8 @@
|
||||
}
|
||||
|
||||
#vertical-tabs-newtab-button {
|
||||
&:hover, &:not(:is(:hover, :active)) .toolbarbutton-icon {
|
||||
&:hover,
|
||||
&:not(:is(:hover, :active)) .toolbarbutton-icon {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
@@ -110,7 +109,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.tabs.dim-pending') {
|
||||
@media (-moz-bool-pref: 'zen.tabs.dim-pending') {
|
||||
&[pending='true'] .tab-icon-image {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -158,13 +157,14 @@
|
||||
|
||||
/* Mark: toolbox as expanded */
|
||||
#navigator-toolbox:is(
|
||||
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
|
||||
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
||||
#navigator-toolbox[zen-user-hover='true'][movingtab],
|
||||
#navigator-toolbox[zen-user-hover='true'][flash-popup],
|
||||
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
|
||||
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
|
||||
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
||||
#navigator-toolbox[zen-user-hover='true'][movingtab],
|
||||
#navigator-toolbox[zen-user-hover='true'][flash-popup],
|
||||
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
|
||||
) {
|
||||
--zen-toolbox-min-width: fit-content;
|
||||
padding: var(--zen-toolbox-padding);
|
||||
padding-top: 0;
|
||||
@@ -232,7 +232,8 @@
|
||||
&:is([open], [checked]) {
|
||||
background: var(--toolbarbutton-active-background) !important;
|
||||
|
||||
& image, label {
|
||||
& image,
|
||||
label {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
@@ -240,7 +241,8 @@
|
||||
&:hover {
|
||||
background: var(--toolbarbutton-hover-background) !important;
|
||||
|
||||
& image, label {
|
||||
& image,
|
||||
label {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
@@ -266,7 +268,7 @@
|
||||
.tab-icon-overlay {
|
||||
&:not([pinned]) {
|
||||
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
|
||||
margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;
|
||||
margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -274,14 +276,17 @@
|
||||
}
|
||||
|
||||
/* Mark: toolbox as collapsed */
|
||||
#navigator-toolbox:not(#navigator-toolbox:is(
|
||||
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
|
||||
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
||||
#navigator-toolbox[zen-user-hover='true'][movingtab],
|
||||
#navigator-toolbox[zen-user-hover='true'][flash-popup],
|
||||
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
|
||||
#navigator-toolbox:not(
|
||||
#navigator-toolbox:is(
|
||||
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
|
||||
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
||||
#navigator-toolbox[zen-user-hover='true'][movingtab],
|
||||
#navigator-toolbox[zen-user-hover='true'][flash-popup],
|
||||
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
|
||||
)
|
||||
) {
|
||||
/* Important: When changin this value, make sure expand on hover doesn't break! */
|
||||
--zen-toolbox-max-width: 49px; /* 1px more because the browser view has one pixel of padding to avoid the border being cut off */
|
||||
--zen-toolbox-padding: 8px;
|
||||
@@ -368,7 +373,7 @@
|
||||
|
||||
& .tab-background:is([selected], [multiselected]) {
|
||||
@media not (prefers-color-scheme: dark) {
|
||||
box-shadow: 0 0 1px 1px rgba(0,0,0,.05) !important;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -397,19 +402,28 @@
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
|
||||
& .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
|
||||
display: none !important;
|
||||
|
||||
|
||||
:is(
|
||||
:root[uidensity=compact],
|
||||
#tabbrowser-tabs[secondarytext-unsupported],
|
||||
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
|
||||
) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
|
||||
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
|
||||
:root[uidensity='compact'],
|
||||
#tabbrowser-tabs[secondarytext-unsupported],
|
||||
:root:not([uidensity='compact']) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
|
||||
)
|
||||
.tab-icon-stack[indicator-replaces-favicon]
|
||||
> :not(&),
|
||||
:root:not([uidensity='compact'])
|
||||
#tabbrowser-tabs:not([secondarytext-unsupported])
|
||||
.tabbrowser-tab:not(:hover)
|
||||
&[indicator-replaces-favicon] {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .tab-throbber, & .tab-icon-pending, & .tab-icon-image, & .tab-sharing-icon-overlay, & .tab-icon-overlay {
|
||||
& .tab-throbber,
|
||||
& .tab-icon-pending,
|
||||
& .tab-icon-image,
|
||||
& .tab-sharing-icon-overlay,
|
||||
& .tab-icon-overlay {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -418,13 +432,12 @@
|
||||
flex-direction: column;
|
||||
|
||||
&:not([as-button='true']) {
|
||||
|
||||
& toolbarbutton {
|
||||
&[active='true']::after {
|
||||
bottom: 50% !important;
|
||||
transform: translateY(50%) !important;
|
||||
}
|
||||
|
||||
|
||||
:root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
|
||||
left: -2px;
|
||||
animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important;
|
||||
@@ -501,7 +514,7 @@
|
||||
/*animation: zen-vtabs-animation 0.3s ease-in-out;*/
|
||||
-moz-window-dragging: no-drag;
|
||||
overflow: hidden;
|
||||
transition: width .2s !important;
|
||||
transition: width 0.2s !important;
|
||||
|
||||
& .tab-throbber,
|
||||
& .tab-icon-pending,
|
||||
@@ -510,7 +523,6 @@
|
||||
& .tab-icon-overlay {
|
||||
transition: 0.1s !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Make pinned tabs stay in a single line */
|
||||
@@ -521,7 +533,7 @@
|
||||
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
|
||||
|
||||
&:has(tab:not([hidden]))::after {
|
||||
bottom: -4px;
|
||||
content: '';
|
||||
@@ -630,7 +642,7 @@
|
||||
|
||||
min-width: unset !important;
|
||||
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
|
||||
|
||||
|
||||
& #zen-sidebar-top-buttons-customization-target {
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
@@ -657,4 +669,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,16 +157,16 @@
|
||||
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
|
||||
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
|
||||
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
|
||||
|
||||
|
||||
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 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) 10%, black 80%);
|
||||
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
|
||||
|
||||
|
||||
--zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
|
||||
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, rgb(15, 15, 15) 92%);
|
||||
|
||||
|
||||
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
|
||||
}
|
||||
}
|
||||
@@ -174,7 +174,7 @@
|
||||
|
||||
@media not (-moz-bool-pref: 'zen.theme.toolbar-themed') {
|
||||
:root {
|
||||
--toolbar-bgcolor: light-dark(#E6E6E6, #1b1b1b) !important;
|
||||
--toolbar-bgcolor: light-dark(#e6e6e6, #1b1b1b) !important;
|
||||
--zen-themed-toolbar-bg: var(--toolbar-bgcolor);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,14 +205,17 @@ button.popup-notification-dropmarker {
|
||||
#notification-popup-box {
|
||||
border-radius: 6px !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: 6px !important;;
|
||||
#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: 6px !important;
|
||||
}
|
||||
|
||||
|
||||
/* Border radius of boxes on the left */
|
||||
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box {
|
||||
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
|
||||
#identity-icon-box {
|
||||
border-top-left-radius: 6px !important;
|
||||
border-bottom-left-radius: 6px !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
@@ -220,17 +223,16 @@ button.popup-notification-dropmarker {
|
||||
}
|
||||
|
||||
/* Extensions or similar */
|
||||
#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
|
||||
#urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
|
||||
border-radius: 6px 6px 6px 6px !important;
|
||||
}
|
||||
|
||||
|
||||
/* Notification Stack */
|
||||
|
||||
.notificationbox-stack {
|
||||
background: transparent;
|
||||
|
||||
&[notificationside="top"] {
|
||||
&[notificationside='top'] {
|
||||
position: absolute;
|
||||
bottom: calc(var(--zen-element-separation) * 1.5);
|
||||
right: calc(var(--zen-element-separation) * 1.5);
|
||||
@@ -258,7 +260,6 @@ button.popup-notification-dropmarker {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/* Other small tweaks */
|
||||
#nav-bar-customization-target {
|
||||
/* Don't grow if potentially-user-sized elements (like the searchbar or the
|
||||
@@ -280,7 +281,7 @@ button.popup-notification-dropmarker {
|
||||
padding-right: var(--zen-element-separation) !important;
|
||||
}*/
|
||||
|
||||
#PersonalToolbar:not([collapsed="true"]) {
|
||||
#PersonalToolbar:not([collapsed='true']) {
|
||||
padding-bottom: 6px;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
position: relative;
|
||||
|
||||
& > * {
|
||||
opacity: .6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&[active='true']::after {
|
||||
@@ -92,7 +92,6 @@
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
:not([zen-user-hover='true'])
|
||||
) {
|
||||
|
||||
& #zen-workspaces-button[as-button='true'] {
|
||||
width: 100% !important;
|
||||
margin: 2px;
|
||||
@@ -101,17 +100,17 @@
|
||||
|
||||
& .zen-workspace-sidebar-wrapper {
|
||||
left: calc(var(--toolbarbutton-outer-padding) + 5px);
|
||||
width: calc(100% - (var(--toolbarbutton-outer-padding) * 3 ));
|
||||
width: calc(100% - (var(--toolbarbutton-outer-padding) * 3));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon {
|
||||
margin-inline-end: 5px;
|
||||
|
||||
|
||||
& [no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user