diff --git a/README.md b/README.md index 5519cd410..8f2acf3ff 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,12 @@ npm start - [Erlend](https://havn.blog) (For making the logo) - [ptr1337](https://github.com/ptr1337) (AUR Packages and optimization flags) +## Third Party Code + +Zen coudn't be in its current state without the help of these amazing projects! + +- Zen's default preferences are based on [BetterFox](https://github.com/yokoffing/Betterfox) + ## License [MPL LICENSE](/LICENSE) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 017cc5f78..a856594d0 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -63,6 +63,7 @@ pref('zen.welcomeScreen.seen', false); pref('zen.tabs.vertical', true); pref('zen.tabs.vertical.right-side', false); pref('zen.theme.accent-color', "#aac7ff"); +pref('zen.theme.border-radius', 10); // In pixels pref('zen.theme.toolbar-themed', true); pref('zen.theme.pill-button', false); pref('zen.theme.floating-urlbar', false); @@ -142,3 +143,7 @@ pref("network.http.rcwn.enabled", false); pref("devtools.debugger.remote-enabled", true); pref("devtools.chrome.enabled", true); +// Disable firefox's revamp +pref("sidebar.revamp", false, locked); +pref("sidebar.verticalTabs", false, locked); + diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs new file mode 100644 index 000000000..f3af31596 --- /dev/null +++ b/src/browser/base/content/ZenStartup.mjs @@ -0,0 +1,106 @@ + +var ZenStartup = { + init() { + this._changeSidebarLocation(); + this._zenInitBrowserLayout(); + }, + + _zenInitBrowserLayout() { + if (this.__hasInitBrowserLayout) return; + this.__hasInitBrowserLayout = true; + this.openWatermark(); + 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 + document.getElementById("zen-appcontent-navbar-container") + .appendChild(document.getElementById("tab-notification-deck-template")); + + gZenVerticalTabsManager.init(); + gZenCompactModeManager.init(); + gZenKeyboardShortcuts.init(); + + function throttle(f, delay) { + let timer = 0; + return function(...args) { + clearTimeout(timer); + timer = setTimeout(() => f.apply(this, args), delay); + } + } + + new ResizeObserver(throttle( + this._updateTabsToolbar.bind(this), 1000 + )).observe(document.getElementById("tabbrowser-tabs")); + + this.closeWatermark(); + }, + + _updateTabsToolbar() { + // Set tabs max-height to the "toolbar-items" height + const toolbarItems = document.getElementById("tabbrowser-tabs"); + const tabs = document.getElementById("tabbrowser-arrowscrollbox"); + tabs.style.maxHeight = '0px'; // reset to 0 + const toolbarRect = toolbarItems.getBoundingClientRect(); + // -5 for the controls padding + tabs.style.maxHeight = toolbarRect.height - 5 + "px"; + console.info("ZenThemeModifier: set tabs max-height to", toolbarRect.height + "px"); + }, + + openWatermark() { + if (!Services.prefs.getBoolPref("zen.watermark.enabled", false)) { + return; + } + const watermark = window.MozXULElement.parseXULToFragment(` + + + + `); + document.body.appendChild(watermark); + }, + + closeWatermark() { + const watermark = document.getElementById("zen-watermark"); + if (watermark) { + watermark.setAttribute("hidden", "true"); + } + }, + + _changeSidebarLocation() { + const kElementsToAppend = [ + "sidebar-splitter", + "sidebar-box", + "navigator-toolbox", + ]; + const wrapper = document.getElementById("zen-tabbox-wrapper"); + const appWrapepr = document.getElementById("zen-sidebar-box-container"); + for (let id of kElementsToAppend) { + const elem = document.getElementById(id); + if (elem) { + wrapper.prepend(elem); + } + } + appWrapepr.setAttribute("hidden", "true"); + + // Set a splitter to navigator-toolbox + const splitter = document.createXULElement("splitter"); + splitter.setAttribute("id", "zen-sidebar-splitter"); + splitter.setAttribute("orient", "horizontal"); + splitter.setAttribute("resizebefore", "sibling"); + splitter.setAttribute("resizeafter", "none"); + const titlebar = document.getElementById("navigator-toolbox"); + titlebar.insertAdjacentElement("afterend", splitter); + }, +}; + +ZenStartup.init(); diff --git a/src/browser/base/content/browser-init-js.patch b/src/browser/base/content/browser-init-js.patch index a3a3096da..5b816d152 100644 --- a/src/browser/base/content/browser-init-js.patch +++ b/src/browser/base/content/browser-init-js.patch @@ -1,12 +1,13 @@ diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js -index a79a9734619f89639c15087fe28e9615354a7209..edaef604d33d76b570571e1bbb2ebc590e045d87 100644 +index f8d49ac2a3a62f389ea44b07a26fcb102abc0b24..c29415e10c776ebc435f33e55f8afb71f0dcf22a 100644 --- a/browser/base/content/browser-init.js +++ b/browser/base/content/browser-init.js -@@ -237,6 +237,9 @@ var gBrowserInit = { +@@ -237,6 +237,10 @@ var gBrowserInit = { gPrivateBrowsingUI.init(); BrowserSearch.init(); BrowserPageActions.init(); + ++ Services.scriptloader.loadSubScript("chrome://browser/content/ZenStartup.mjs", window); + Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", window); + if (gToolbarKeyNavEnabled) { diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch index 1c6aa3fb6..6c2dfa3ac 100644 --- a/src/browser/base/content/browser-xhtml.patch +++ b/src/browser/base/content/browser-xhtml.patch @@ -1,17 +1,17 @@ diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml -index 3063370347db9e2812ad30205e585c849e44c91e..be74d9e624b8220cb9bd009bae31fb513c4ec73f 100644 +index 481ebbee437250c71e9bd10c4fb6fc0c31314925..3bb046a4635fad831cc447e29516ee5ed407a3f2 100644 --- a/browser/base/content/browser.xhtml +++ b/browser/base/content/browser.xhtml -@@ -139,6 +139,8 @@ +@@ -138,6 +138,8 @@ window.addEventListener("DOMContentLoaded", gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true }); +#include zen-locales.inc.xhtml -+#include zen-scripts.inc.xhtml ++#include zen-assets.inc.xhtml # All sets except for popupsets (commands, keys, and stringbundles) -@@ -160,9 +162,12 @@ +@@ -159,9 +161,12 @@ @@ -27,10 +27,3 @@ index 3063370347db9e2812ad30205e585c849e44c91e..be74d9e624b8220cb9bd009bae31fb51 - diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml new file mode 100644 index 000000000..18a4b5572 --- /dev/null +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn new file mode 100644 index 000000000..993d3b43a --- /dev/null +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -0,0 +1,37 @@ + + + content/browser/zenThemeModifier.js (content/zenThemeModifier.js) + content/browser/ZenStartup.mjs (content/ZenStartup.mjs) + content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs) + content/browser/zen-components/ZenViewSplitter.mjs (content/zen-components/src/ZenViewSplitter.mjs) + content/browser/zen-components/ZenWorkspaces.mjs (content/zen-components/src/ZenWorkspaces.mjs) + content/browser/zen-components/ZenSidebarManager.mjs (content/zen-components/src/ZenSidebarManager.mjs) + content/browser/zen-components/ZenProfileDialogUI.mjs (content/zen-components/src/ZenProfileDialogUI.mjs) + content/browser/zen-components/ZenKeyboardShortcuts.mjs (content/zen-components/src/ZenKeyboardShortcuts.mjs) + content/browser/zen-components/ZenThemeBuilder.mjs (content/zen-components/src/ZenThemeBuilder.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-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-floating-urlbar.css (content/zen-styles/zen-floating-urlbar.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-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-profile-dialog.css (content/zen-styles/zen-profile-dialog.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-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.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-compact-mode.css (content/zen-styles/zen-compact-mode.css) + diff --git a/src/browser/base/content/zen-scripts.inc.xhtml b/src/browser/base/content/zen-scripts.inc.xhtml deleted file mode 100644 index c8dd76038..000000000 --- a/src/browser/base/content/zen-scripts.inc.xhtml +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/src/browser/base/content/zen-scripts.jar.inc.mn b/src/browser/base/content/zen-scripts.jar.inc.mn deleted file mode 100644 index c3a56e835..000000000 --- a/src/browser/base/content/zen-scripts.jar.inc.mn +++ /dev/null @@ -1,9 +0,0 @@ - content/browser/zenThemeModifier.js (content/zenThemeModifier.js) - content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs) - content/browser/zen-components/ZenViewSplitter.mjs (content/zen-components/src/ZenViewSplitter.mjs) - content/browser/zen-components/ZenWorkspaces.mjs (content/zen-components/src/ZenWorkspaces.mjs) - content/browser/zen-components/ZenSidebarManager.mjs (content/zen-components/src/ZenSidebarManager.mjs) - content/browser/zen-components/ZenProfileDialogUI.mjs (content/zen-components/src/ZenProfileDialogUI.mjs) - content/browser/zen-components/ZenKeyboardShortcuts.mjs (content/zen-components/src/ZenKeyboardShortcuts.mjs) - content/browser/zen-components/ZenThemeBuilder.mjs (content/zen-components/src/ZenThemeBuilder.mjs) - \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css new file mode 100644 index 000000000..5b82ad473 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -0,0 +1,109 @@ + +@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-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 zen-slide-in { + from { + transform: translateX(-10px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes zen-zoom-in { + from { + transform: scale(0.5); + opacity: 0; + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes zen-deck-fadeIn { + 0% { + transform: scale(0.9); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes zen-sidebar-panel-animation { + 0% { + opacity: 0; + transform: scale3d(0.9, 0.9, 0.9); + } + + 100% { + opacity: 1; + transform: scale3d(1, 1, 1); + } +} + +@keyframes zen-sidebar-panel-animation-2 { + 0% { + opacity: 0; + transform: translateX(-50px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes zen-sidebar-panel-animation-reverse { + 0% { + opacity: 1; + transform: translateX(0); + } + + 99% { + opacity: 0; + transform: translateX(-50px); + } + + 100% { + display: none !important; + } +} diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css new file mode 100644 index 000000000..7e86c784e --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-browser-container.css @@ -0,0 +1,16 @@ + +:root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) { + & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { + width: -moz-available; + margin: 0 var(--zen-element-separation) var(--zen-element-separation) 0; + box-shadow: 0 0 0 1px var(--zen-colors-border); + + & browser { + clip-path: inset(0px 0px 0px round var(--zen-browser-border-radius) 0); + } + + &, & browser { + border-radius: var(--zen-browser-border-radius); + } + } +} diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css new file mode 100644 index 000000000..e444966a1 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -0,0 +1,35 @@ + +#navigator-toolbox, +#browser, +#appcontent, +#tabbrowser-tabpanels { + background: transparent !important; +} + +#browser { + width: 100%; +} + +html#main-window > body { + background: var(--zen-main-browser-background) !important; +} + +:not([inDOMFullscreen="true"]) #appcontent { + overflow: hidden; +} + +:not([inDOMFullscreen="true"]) #appcontent, +#sidebar-box { + /** Sidebar is already hidden in full screen mode */ + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; + border: none; +} + +#zen-main-app-wrapper { + background: var(--zen-main-browser-background); +} + +#tabbrowser-tabbox { + display: flex; + flex-direction: row; +} diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css b/src/browser/base/content/zen-styles/zen-buttons.css similarity index 77% rename from src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css rename to src/browser/base/content/zen-styles/zen-buttons.css index 62a361f4d..e711678d7 100644 --- a/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css +++ b/src/browser/base/content/zen-styles/zen-buttons.css @@ -25,9 +25,19 @@ button:active { html|button:not(:is( .tab-button, .ghost-button, .button-toggle, .button-edit, - .button-add -)) { + .button-add, +)), +xul|button:is( + .expander-down +) { transition: .2s; + min-width: unset !important; border-radius: 6px !important; - min-width: 80px !important; +} + +@media (-moz-bool-pref: "zen.theme.pill-button") { + :host(:is(.anonymous-content-host, notification-message)), + :root { + --zen-button-border-radius: 20px; + } } diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css new file mode 100644 index 000000000..af2d5382b --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -0,0 +1,151 @@ + +/* All overrides for compact mode go here */ + +@media not (-moz-bool-pref: "zen.view.compact") { + #sidebar-box { + margin-top: 0 !important; + } +} + +@media (-moz-bool-pref: "zen.view.compact") { + :root[sizemode="fullscreen"], + #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; } + + #navigator-toolbox { + --zen-compact-toolbox-margin-single: 15px; + --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single); + position: absolute; + display: block; + transition: 200ms ease-in-out !important; + transform: translateX(calc(-100% + var(--zen-compact-toolbox-margin-single) + 2px)); + opacity: 0; + line-height: 0; + z-index: 1; + height: 100%; + margin: 0; + padding: var(--zen-compact-toolbox-margin) !important; + + & #titlebar { + border: 1px solid var(--zen-colors-border); + background: var(--zen-colors-tertiary) !important; + padding: 0 5px; + border-radius: var(--zen-panel-radius); + } + } + + @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { + #navigator-toolbox { + width: fit-content !important; + } + } + + @media (-moz-bool-pref: "zen.view.sidebar-expanded") { + #navigator-toolbox { + min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important; + } + } + + #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])), + #sidebar-box:not([positionend="true"]) { + margin-right: 0 !important; + margin-left: 10px !important; + } + + #sidebar-box[positionend="true"] { + margin-left: 0 !important; + margin-right: 10px !important; + } + + #sidebar-splitter { + margin: 0 !important; + } + + @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") { + #navigator-toolbox { + /* Remove the top margin */ + --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 3) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single); + } + + #zen-sidebar-web-panel-wrapper, + #sidebar-box { + margin-top: 0 !important; + } + } + + #navigator-toolbox:hover, + #navigator-toolbox:focus-within, + #navigator-toolbox[zen-user-show], + #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, + #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) { + transition-delay: 33ms !important; + transform: none !important; + opacity: 1; + } + + #navigator-toolbox > *{ line-height: normal; pointer-events: auto } + + #navigator-toolbox, + #navigator-toolbox > *{ + -moz-appearance: none !important; + } + + #zen-sidebar-splitter { + display: none !important; + } + + /* Don't apply transform before window has been fully created */ + :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important } + + :root[customizing] #navigator-toolbox{ + position: relative !important; + transform: none !important; + opacity: 1 !important; + } + + #navigator-toolbox[inFullscreen] > #PersonalToolbar, + #PersonalToolbar[collapsed="true"]{ display: none } + + :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { + margin-left: 10px !important; + margin-right: 10px !important; + } + + @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") { + #zen-appcontent-navbar-container { + --urlbar-height: unset; + transition: .2s ease-in-out; + transform: translateY(calc(-100% + 5px)); + opacity: 0; + position: absolute; + width: 100%; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + border-bottom: 1px solid var(--zen-colors-border); + top: 0; + background: var(--zen-colors-tertiary); + z-index: 2; + transition: .2s ease-in-out; + } + + #zen-appcontent-navbar-container:hover, + #zen-appcontent-navbar-container:focus-within, + #zen-appcontent-navbar-container[zen-user-show], + #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container, + #zen-appcontent-navbar-container:has(*[open="true"]) { + transform: translateY(0); + opacity: 1; + } + + :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { + margin-top: 10px !important; + } + + #titlebar { + padding-top: 5px !important; + } + + #zen-sidebar-web-panel-wrapper { + margin-top: 10px !important; + } + } +} diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css new file mode 100644 index 000000000..278cea3c4 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -0,0 +1,120 @@ +/* + * 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; +} + +#tabbrowser-tabpanels[zen-split-view="true"] > *:not([zen-split="true"]) { + flex: 0; + margin: 0; +} + +#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split="true"] { + flex: 1; + margin-right: 5px; +} + +#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split-anim="true"] { + animation: zen-deck-fadeIn 0.2s forwards; +} + +#tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer[zen-split-active="true"] { + box-shadow: 0 0 0 2px var(--zen-primary-color) !important; +} + +#tabbrowser-tabpanels:has(> [zen-split="true"]) { + display: grid; + grid-gap: 5px; +} + +#zen-split-views-box:not([hidden="true"]) { + display: flex !important; +} + +/* Split view panel */ + +#zenSplitViewModifierViewDefault { + min-width: 180px; + min-height: 180px; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + + gap: 10px; + padding: 15px; +} + +#zenSplitViewModifierViewDefault > vbox { + display: flex; + align-items: center; + flex-direction: column; + cursor: pointer; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview { + border-radius: 5px; + border: 1px solid var(--zen-colors-border); + width: 100px; + height: 70px; + overflow: hidden; + padding: 5px; + user-select: none; + font-weight: 500; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active { + box-shadow: 0 0 0 2px var(--zen-primary-color); + border-width: 0px; +} + +#zenSplitViewModifierViewDefault p { + margin-top: 5px; + margin-bottom: 0; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box { + background-color: var(--zen-colors-secondary); + border-radius: 3px; + width: 100%; + height: 100%; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child { + margin-top: 5px; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child { + margin-left: 5px; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid { + display: grid; + grid-template-areas: "a b" "c b"; + gap: 5px; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) { + grid-area: a; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) { + grid-area: b; +} + +#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) { + grid-area: c; +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-floating-urlbar.css b/src/browser/base/content/zen-styles/zen-floating-urlbar.css new file mode 100644 index 000000000..7aa313566 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-floating-urlbar.css @@ -0,0 +1,45 @@ +@media (-moz-bool-pref: "zen.theme.floating-urlbar") { + #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) { + #urlbar-input { + font-size: 16px !important; + } + + z-index: 2; + position: fixed !important; + bottom: auto !important; + top: 20vh !important; + padding-left: 6px !important; + padding-right: 8px !important; + + left: 18vw !important; + right: 18vw !important; + width: 64vw !important; + + &:after { + content: ""; + position: fixed; + pointer-events: none; + + width: 100vw; + height: 100vh; + + top: 0px; + left: 0px; + + background-color: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(5px); + + z-index: -1; + } + + #identity-box { + margin: auto 0; + height: 30px; + margin-right: 10px; + } + + .urlbar-go-button { + margin: auto 0; + } + } +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-panel-ui.css b/src/browser/base/content/zen-styles/zen-panel-ui.css new file mode 100644 index 000000000..6f534563a --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-panel-ui.css @@ -0,0 +1,8 @@ + +panel[type="arrow"][animate][animate="open"] { + animation: zen-jello-animation 0.2s ease-in-out; +} + +panel[type="arrow"][animate][animate="cancel"] { + animation: zen-jello-out-animation 0.2s ease-in-out; +} diff --git a/src/browser/base/content/zen-styles/zen-panels/bookmarks.css b/src/browser/base/content/zen-styles/zen-panels/bookmarks.css new file mode 100644 index 000000000..c7ee7ad14 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-panels/bookmarks.css @@ -0,0 +1,60 @@ +#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,.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; +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-panels/extensions.css b/src/browser/base/content/zen-styles/zen-panels/extensions.css new file mode 100644 index 000000000..d851b8424 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-panels/extensions.css @@ -0,0 +1,69 @@ +#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); + } + } +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-panels/print.css b/src/browser/base/content/zen-styles/zen-panels/print.css new file mode 100644 index 000000000..97f509dc5 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-panels/print.css @@ -0,0 +1,7 @@ +.printDialogBox { + max-width: 90vw; +} + +.printSettingsBrowser { + min-width: 350px; +} \ No newline at end of file diff --git a/src/toolkit/themes/shared/zen-popup.css b/src/browser/base/content/zen-styles/zen-popup.css similarity index 51% rename from src/toolkit/themes/shared/zen-popup.css rename to src/browser/base/content/zen-styles/zen-popup.css index 5aecf7ef8..ddd511563 100644 --- a/src/toolkit/themes/shared/zen-popup.css +++ b/src/browser/base/content/zen-styles/zen-popup.css @@ -1,20 +1,19 @@ -/* - * 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"); :root { - --panel-subview-body-padding: 2px 0 !important; - --arrowpanel-menuitem-border-radius: 5px !important; - --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important; - --arrowpanel-menuitem-padding-block: 8px !important; - --arrowpanel-menuitem-padding-inline: 14px !important; + --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 !important; - --panel-separator-margin-horizontal: 1px !important; + --panel-separator-margin-vertical: 2px; + --panel-separator-margin-horizontal: 1px; --uc-panel-zoom-button-padding: 8px; --uc-panel-zoom-button-inline-padding: 9px; @@ -41,39 +40,45 @@ --uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width)); --uc-contextmenu-separator-horizontal: 0; - --panel-separator-color: var(--zen-colors-border) !important; + --panel-separator-color: var(--zen-colors-border); + --zen-panel-separator-width: 1px; } +menupopup, panel { + --panel-background: var(--arrowpanel-background); + --panel-border-radius: var(--zen-panel-radius); +} + /* app menu */ .addon-banner-item, .panel-banner-item { - margin: 2px 4px 2px !important; - padding-inline: 4px 12px !important; - padding-block: var(--arrowpanel-menuitem-padding-block) !important; - border-radius: var(--arrowpanel-menuitem-border-radius) !important; + 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 !important; + 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) !important; + 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)) !important; + padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline)); } .subviewbutton>.toolbarbutton-icon { - width: 15px !important; + width: 15px; } /* firefox profile avatar in appmenu */ @@ -89,37 +94,37 @@ /* disable proton account separator */ #appMenu-fxa-separator { - border-image: none !important; + border-image: none; } #appMenu-fxa-status2:not([fxastatus]) { - padding-block: 0 !important; + padding-block: 0; } #appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 { - margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important; + margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1); } /* zoom controls */ #appMenu-zoom-controls { - border-top: 1px solid var(--panel-separator-color) !important; - padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important; - padding-block: var(--uc-panel-zoom-padding-block) !important; - margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important; + 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) !important; - margin: 0 !important; + 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) !important; + 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) !important; + margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px); } #appMenu-zoom-controls>#appMenu-fullscreen-button2::before { @@ -133,65 +138,65 @@ } #appMenu-zoomReset-button2 { - height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important; - min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important; + 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) !important; + 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) !important; + background-color: var(--panel-item-active-bgcolor); } #appMenu-zoomReset-button2>.toolbarbutton-text, #appMenu-fullscreen-button2>.toolbarbutton-icon { - background-color: transparent !important; - padding: 0 !important; + background-color: transparent; + padding: 0; } .subviewbutton[shortcut]::after { - opacity: 0.7 !important; + opacity: 0.7; } #widget-overflow-mainView .panel-subview-body { - padding-bottom: 0 !important; + padding-bottom: 0; } .PanelUI-subView>.panel-header+toolbarseparator { - margin-bottom: 0 !important; + margin-bottom: 0; } .PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body { - padding-top: var(--panel-separator-margin-vertical) !important; + padding-top: var(--panel-separator-margin-vertical); } #identity-popup-security-button { - margin-bottom: var(--panel-separator-margin-vertical) !important; + 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) !important; + min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px); } /* URL bar popup */ .identity-popup-security-connection>hbox>description { - margin-inline-start: 0 !important; + margin-inline-start: 0; } .identity-popup-security-connection.identity-button { - margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important; + margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)); } #identity-popup-mainView-panel-header-span, @@ -199,42 +204,42 @@ #identity-popup-mainView-panel-header label, #permission-popup-mainView-panel-header label, #protections-popup-mainView-panel-header-span { - margin-block: 0 !important; + margin-block: 0; } .permission-popup-section { - padding-block: var(--uc-permission-itemcontainer-padding-block) !important; + padding-block: var(--uc-permission-itemcontainer-padding-block); } #permission-popup-permissions-content { - padding-inline: var(--uc-permission-item-padding-inline) !important; + 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) !important; + 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) !important; + margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline); } #editBookmarkPanel>#editBookmarkHeaderSeparator, #editBookmarkPanel>.panel-subview-body>#editBookmarkSeparator { - margin-inline: 0 !important; + margin-inline: 0; } #identity-popup-mainView > toolbarseparator:first-child, #unified-extensions-view > toolbarseparator:first-child { - display: none !important; - opacity: 0 !important; + display: none; + opacity: 0; } menupopup::part(content), panel::part(content) { - border: var(--zen-appcontent-border) !important; + border: var(--zen-appcontent-border); } menupopup, @@ -242,143 +247,32 @@ panel { box-shadow: none; } -/*toolbarbutton:not(:is( - #appMenu-fxa-label2, - .subviewbutton-iconic, - .zen-sidebar-action-button, - .all-tabs-close-button, - .zen-sidebar-panel-button, - #zen-sidebar-web-panel-pinned, - #PanelUI-zen-profiles-managePrfs, - .bookmark-item, - #urlbar-zoom-button, - .panel-info-button, -)),*/ -#PanelUI-zen-profiles menuitem { - /** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */ - margin: 0 !important; - border-radius: 0 !important; -} - .panel-subview-footer-button { - padding-top: 10px !important; - padding-bottom: 10px !important; -} - -#PanelUI-zen-profiles menuitem { - padding: 5px !important; -} - -#PanelUI-zen-profiles menuitem:last-child { - margin-bottom: 5px !important; -} - -panelview .unified-extensions-item-action-button { - padding: 5px 20px !important; -} - -#unified-extensions-description { - padding: 0 20px; - margin: 0 !important; -} - -.unified-extensions-item { - padding: 0 !important; -} - -.panel-subview-footer-button { - --arrowpanel-menuitem-padding-block: 20px !important; - --arrowpanel-menuitem-padding-inline: 15px !important; -} - -toolbarseparator, menuseparator { - border-width: var(--zen-panel-separator-width) !important; -} - -#appMenu-zoom-controls { - border-top-width: var(--zen-panel-separator-width) !important; -} - -#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,.1)); -} - -#editBookmarkPanel::part(content) { - display: flex; - flex-direction: row !important; -} - -#zenEditBookmarkPanelFavicon { - width: 20px; - height: 20px; -} - -#editBookmarkPanel .panel-header { - min-height: 0 !important; - 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 !important; -} - -#editBMPanel_folderMenuList::part(icon) { - margin-right: 10px; -} - -/**/ - -#unified-extensions-manage-extensions { - padding-left: 20px; + padding-top: 10px; + padding-bottom: 10px; } #identity-popup-clear-sitedata-footer { - margin-bottom: 0 !important; - padding-top: 0 !important; + margin: 0; + padding: 0; } -/* Dialog box */ - -.printDialogBox { - max-width: 90vw !important; +.panel-subview-footer-button { + --arrowpanel-menuitem-padding-block: 20px; + --arrowpanel-menuitem-padding-inline: 15px; } -.printSettingsBrowser { - min-width: 350px !important; +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 */ @@ -388,58 +282,3 @@ menu, menuitem { color: var(--button-hover-color); } } - -/** Unified Extensions View */ - -#unified-extensions-view { - --uei-icon-size: 16px !important; - - .unified-extensions-item { - margin-block: 0 !important; - border-radius: var(--arrowpanel-menuitem-border-radius) !important; - - > .unified-extensions-item-action-button { - .unified-extensions-item-message-deck { - display: none; - } - - &:hover { - background-color: initial !important; - } - } - - > .unified-extensions-item-menu-button { - list-style-image: url("chrome://global/skin/icons/more.svg") !important; - padding: 0 !important; - - > .toolbarbutton-icon { - padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; - border: none !important; - opacity: 0; - } - - &:hover { - - > .toolbarbutton-icon { - background-color: initial !important; - } - - &:active { - color: var(--button-primary-hover-bgcolor) !important; - } - } - } - - &: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); - } - } -} diff --git a/src/browser/base/content/zen-styles/zen-profile-dialog.css b/src/browser/base/content/zen-styles/zen-profile-dialog.css new file mode 100644 index 000000000..91b8cdff9 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-profile-dialog.css @@ -0,0 +1,169 @@ +#PanelUI-zen-profiles { + --menu-panel-width: 19em; + position: relative; + padding-bottom: 5px; +} + +#PanelUI-zen-profiles-header { + width: 280px; + height: 130px; + background: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%); + position: relative; +} + +#PanelUI-zen-profiles-user-picture { + background-image: var(--avatar-image-url); + width: 75px; + height: 75px; + border: 4px var(--arrowpanel-background) solid; + background-color: var(--zen-colors-primary-foreground); + border-radius: 50%; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + margin: 0 auto; + transform: translateY(100%); +} + +.PanelUI-zen-profiles-item { + position: relative; + display: flex; + padding: 6px 10px; + font: menu; + align-items: center; +} + +#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item { + margin-bottom: 2px; + border-radius: 5px; + margin: 2px 5px; +} + +#PanelUI-zen-profiles-list > toolbarseparator:first-child { + margin: 5px; +} + +.PanelUI-zen-profiles-item:hover { + background: var(--panel-item-hover-bgcolor); + color: inherit; +} + +.PanelUI-zen-profiles-item::after { + content: ''; + background-image: url("chrome://global/skin/icons/arrow-right.svg"); + background-size: 1em; + background-repeat: no-repeat; + background-position: center; + width: 1em; + height: 1em; + margin-left: auto; + pointer-events: none; + top: 50%; + right: 1em; + transform: translateY(-50%); + position: absolute; +} + +@media (prefers-color-scheme: dark) { + .PanelUI-zen-profiles-item::after { + filter: invert(1); + } +} + +#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-avatar { + width: 20px; + height: 20px; + border-radius: 5px; + margin: 1px 0.5em 1px 1px; +} + +#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-name { + font-weight: normal; + font-size: 15px; + margin-left: 5px; +} + +#PanelUI-zen-profiles-current-info { + --zen-separation-from-content: 35px; + margin-top: calc(var(--zen-separation-from-content) + 30px); /** Ignore the profile picture */ +} + +#PanelUI-zen-profiles-current-name { + font-size: 1.3em; + font-weight: 600; + line-height: 0.5; + padding: 5px 10px; + border-radius: 5px; + margin: 0 auto; +} + + +#PanelUI-zen-profiles toolbarbutton::after { + display: none; +} + +#PanelUI-zen-profiles toolbarbutton { + padding-left: 16px; + padding-right: 16px; +} + + +#PanelUI-zen-profiles toolbarbutton:last-child { + margin-bottom: 5px !important; +} + +#PanelUI-zen-profiles-current-profile-current { + font-size: 13px; + opacity: 0.5; + margin: 0 auto var(--zen-separation-from-content) auto; + font-size: 15px; + font-weight: 600; +} + + +#PanelUI-zen-profiles-actions { + color-scheme: dark; + position: absolute; + top: 10px; + right: 10px; + border-radius: 10px !important; + padding: 1px 10px !important; + transition: .1s; + color: light-dark(white, black); + background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); +} + +#PanelUI-zen-profiles-managePrfs:hover { + background: var(--panel-item-hover-bgcolor); +} + +#PanelUI-zen-profiles-actions toolbarbutton { + cursor: pointer; + padding: 0; +} + +#PanelUI-zen-profiles-actions toolbarbutton .toolbarbutton-icon { + width: 14px !important; +} + +#PanelUI-zen-profiles-actions toolbarbutton:not(:first-child) { + margin-left: 10px; +} + +#PanelUI-zen-profiles-actions toolbarbutton label { + display: none !important; +} + +#PanelUI-zen-profiles menuitem { + /** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */ + margin: 0; + border-radius: 0; +} + +#PanelUI-zen-profiles menuitem { + padding: 5px; +} + +#PanelUI-zen-profiles menuitem:last-child { + margin-bottom: 5px; +} diff --git a/src/browser/themes/shared/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css similarity index 88% rename from src/browser/themes/shared/zen-sidebar-panels.css rename to src/browser/base/content/zen-styles/zen-sidebar-panels.css index 859950ff6..7a23aa760 100644 --- a/src/browser/themes/shared/zen-sidebar-panels.css +++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css @@ -4,7 +4,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -#zen-sidebar-panels-wrapper { + #zen-sidebar-panels-wrapper { /*min-height: 500px;*/ display: flex; align-items: center; @@ -126,7 +126,7 @@ #zen-sidebar-web-panel[hidden="true"] #zen-sidebar-web-panel-hsplitter, #zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-splitter, #zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-hsplitter, -#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned="true"])) + #zen-sidebar-web-panel-splitter { +#zen-sidebar-web-panel:not([pinned="true"]) #zen-sidebar-web-panel-hsplitter { display: none; margin: 0; } @@ -159,46 +159,6 @@ animation: zen-sidebar-panel-animation-reverse 0.2s ease-in-out forwards; } -@keyframes zen-sidebar-panel-animation { - 0% { - opacity: 0; - transform: scale3d(0.9, 0.9, 0.9); - } - - 100% { - opacity: 1; - transform: scale3d(1, 1, 1); - } -} - -@keyframes zen-sidebar-panel-animation-2 { - 0% { - opacity: 0; - transform: translateX(-50px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes zen-sidebar-panel-animation-reverse { - 0% { - opacity: 1; - transform: translateX(0); - } - - 99% { - opacity: 0; - transform: translateX(-50px); - } - - 100% { - display: none !important; - } -} - #zen-sidebar-web-header, #zen-sidebar-panels-wrapper { width: 100%; @@ -275,4 +235,4 @@ width: -moz-available; text-align: center; display: block; -} +} \ No newline at end of file diff --git a/src/browser/themes/shared/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css similarity index 90% rename from src/browser/themes/shared/zen-sidebar.css rename to src/browser/base/content/zen-styles/zen-sidebar.css index bbb0fcea6..44790c8a9 100644 --- a/src/browser/themes/shared/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -4,8 +4,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("zen-sidebar-panels.css"); - :root { --sidebar-background-color: var(--toolbar-bgcolor) !important; --zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); @@ -13,26 +11,23 @@ #sidebar-box { --zen-sidebar-box-border-radius: var(--zen-browser-border-radius); - margin: 10px !important; - border-radius: var(--zen-sidebar-box-border-radius) !important; + margin: var(--zen-element-separation); + border-radius: var(--zen-sidebar-box-border-radius); overflow: hidden; transition: .2s; - margin-left: 0 !important; + margin-left: 0; border: var(--zen-appcontent-border); box-shadow: none; + margin-top: 0; } #sidebar-box[hidden="true"] { - width: 0 !important; - opacity: 0 !important; + width: 0; + opacity: 0; } -#sidebar-box[positionend="true"] { - order: 1 !important; -} - -#sidebar-box:not([positionend ="true"]) { - margin-right: 0 !important; +#sidebar-box:not([positionend="true"]) { + margin-right: 0; } #zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar { @@ -167,13 +162,13 @@ #zen-sidebar-icons-wrapper { display: flex; flex-direction: column; - padding: 0 3px; + margin: 0 var(--zen-tabbrowser-padding); position: relative; background: transparent !important; align-items: center; justify-content: end; min-height: fit-content; - --zen-sidebar-action-content-separator: 15px; + --zen-sidebar-action-content-separator: calc(10px + var(--zen-tabbrowser-padding)); padding-top: var(--zen-sidebar-action-content-separator); margin-top: var(--zen-sidebar-action-content-separator); } @@ -197,9 +192,23 @@ display: none; } +:root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter { + display: block; + width: 1px; + opacity: 0; +} + +:root[inDOMFullscreen="true"] #zen-sidebar-splitter { + display: none; +} + @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { #navigator-toolbox { - width: 0 !important; + width: 0; + } + + #zen-sidebar-splitter { + display: none !important; } } @@ -208,4 +217,4 @@ display: block; } } - + \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-single-components.css b/src/browser/base/content/zen-styles/zen-single-components.css new file mode 100644 index 000000000..58c250939 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-single-components.css @@ -0,0 +1,50 @@ +/* Screenshots */ + +#screenshotsPagePanel { + position: absolute !important; + top: 3%; + right: 1.5%; +} + +/* Watermark */ + +#zen-watermark { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--zen-main-browser-background); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; +} + +#zen-watermark image { + opacity: .2; + filter: grayscale(100%); + width: 200px; + height: 200px; +} + +#zen-watermark[hidden="true"] { + transition: 0.6s; + transition-delay: .5s; + opacity: 0; + pointer-events: none; +} + +#zen-workspaces-button .zen-workspace-sidebar-name { + margin-left: 10px; + display: none; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +@media not (-moz-bool-pref: "zen.watermark.enabled") { + #zen-watermark { + display: none; + } +} diff --git a/src/browser/base/content/zen-styles/zen-tabs.css b/src/browser/base/content/zen-styles/zen-tabs.css new file mode 100644 index 000000000..9e328404b --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-tabs.css @@ -0,0 +1,4 @@ + +/* Styles for both vertical and horizontal tabs */ +/*@import url("chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css");*/ +@import url("chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css"); diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css new file mode 100644 index 000000000..45bff3222 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -0,0 +1,383 @@ + +@media (-moz-bool-pref: "zen.tabs.vertical") { + #titlebar { + height: 100%; + } + + #navigator-toolbox { + --zen-tabbrowser-padding: 5px; + min-width: 55px; + margin-top: 0; /* Issue #156 */ + } + + :root[inFullscreen="true"] #navigator-toolbox { + display: none; + } + + #zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox { + transition: .3s; + } + + #navigator-toolbox toolbar#TabsToolbar { + margin: var(--zen-appcontent-separator-from-window); + overflow: hidden; + transition: .2s; + flex-direction: column; + padding: 5px 0; + margin-right: 0; + -moz-window-dragging: no-drag; + --zen-sidebar-action-button-width: 38px; + padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */ + } + + #TabsToolbar-customization-target { + flex-direction: column; + } + + :root[customizing] .customization-target:not(#widget-overflow-fixed-list) { + min-width: 0; + } + + toolbarpaletteitem { + justify-content: center; + } + + toolbarbutton#scrollbutton-down, + toolbarbutton#scrollbutton-up { + display: none; + } + + #toolbar-menubar { + display: none; + } + + .tab-label-container { + display: none; + } + + .tab-icon-stack > .tab-icon-image, + .tab-icon-stack > .tab-throbber { + width: var(--zen-browser-tab-icon-size); + height: var(--zen-browser-tab-icon-size); + margin-inline-end: 0; + } + + .tab-icon-stack .tab-icon-image { + transform: scale(0.5); + opacity: 0; + animation: zen-zoom-in 0.12s ease-in-out 0.3s forwards; + } + + .tab-background { + display: none; + } + + .tabbrowser-tab { + --zen-browser-tab-icon-size: 18px; + --tab-min-width: 36px; + margin: 0 auto; + border-radius: 8px; + position: relative; + color-scheme: var(--tab-selected-color-scheme); + border: 2px solid transparent; + background: transparent; + padding: 0; + align-items: center; + min-height: var(--tab-min-width); /* Make a box */ + animation: zen-slide-in 0.3s; + width: calc(var(--zen-browser-tab-icon-size) + 2px); + transition: .1s background, .1s border-color; + min-width: var(--tab-min-width); + display: flex; + justify-content: center; + align-items: center; + } + + @media (-moz-bool-pref: "zen.tabs.dim-pending") { + .tabbrowser-tab[pending]:not(:hover) { + opacity: 0.5; + } + } + + .tabbrowser-tab[hidden="true"] { + display: none; + } + + .tabbrowser-tab:hover { + background: var(--toolbarbutton-hover-background); + } + + .tabbrowser-tab:active, + .zen-sidebar-panel-button:active { + transform: scale(0.9); + } + + .tab-stack { + width: 30px; + height: 30px; + min-width: 30px; + min-height: 30px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + } + + .tabbrowser-tab:not([fadein]) { + display: none; + } + + .tabbrowser-tab:is([multiselected="true"], [selected]) { + background: var(--toolbarbutton-hover-background); + } + + #private-browsing-indicator-with-label { + display: none; + } + + .tabbrowser-tab::after {/* Containers */ + background: var(--identity-tab-color, transparent); + border-radius: 2px; + height: 80%; + width: 2px; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -2px; + content: ''; + pointer-events: none; + } + + .tabbrowser-tab { + margin-inline-start: 0; + margin: 0 auto; + } + + .tabbrowser-tab[pinned] { + position: relative; + display: flex; + } + + #tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of [fadein]:not([pinned]):not([hidden])) { + margin-top: 15px; + position: relative; + overflow: visible; + + & .tab-stack::before { + content: ''; + position: absolute; + top: -11px; + left: 0; + width: 100%; + height: 1.5px; + border-radius: 1px; + background: var(--zen-colors-border); + } + } + + .tab-close-button { + position: absolute; + display: none; + left: 0; + top: 50%; + } + + .tabbrowser-tab[open="true"]:hover .tab-close-button { + /* TODO: fix this */ + /*display: block;*/ + } + + .tab-content { + padding: 0; + width: fit-content; + + &[pinned] { + padding: 0 !important; + } + } + + .toolbar-items > toolbartabstop:first-child { + display: none; + } + + #nav-bar > *:not(.titlebar-buttonbox-container) { + padding-top: 5px; + padding-bottom: 5px; + } + + #TabsToolbar-customization-target { + height: 100%; + } + + #tabbrowser-tabs { + margin-inline-start: 0; + padding-inline-start: 0; + border: none; + /*background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));*/ + margin: 0; + border: none; + height: 100%; + } + + #tabbrowser-arrowscrollbox { + margin: 3px 0; + } + + #alltabs-button stack { + transform: rotate(-90deg); + } + + .tab-icon-overlay { + margin-inline-end: 0; + display: none; /* TODO: fix this */ + } + + @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { + #navigator-toolbox { + width: fit-content !important; + } + } + + @media (-moz-bool-pref: "zen.view.sidebar-expanded") { + #navigator-toolbox { + --zen-navigation-toolbar-min-width: 160px; + min-width: var(--zen-navigation-toolbar-min-width); + align-items: start; + padding-right: 5px; + transition: .2s; + width: 170px; + border: none; + } + + .tab-label-container { + display: block; + } + + #titlebar, + #TabsToolbar, + #TabsToolbar .toolbar-items { + width: 100%; + align-items: flex-start; + } + + #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) { + width: 100% !important; + border-radius: 8px; + } + + #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover { + background: var(--button-hover-bgcolor); + } + + #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text, + #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon, + #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack { + background: transparent !important; + } + + #tabbrowser-arrowscrollbox-periphery { + margin-top: 5px; + } + + #tabbrowser-arrowscrollbox-periphery > toolbarbutton { + display: flex; + justify-content: center; + align-items: center; + } + + .tabbrowser-tab { + max-width: unset !important; + + &:not([pinned]) { + width: 100%; + + &:hover .tab-close-button { + display: block !important; + } + + & .tab-content { + position: relative; + width: 100%; + } + + & .tab-stack { + justify-content: start; + padding: 10px; + width: 100% !important; + } + + & .tab-label-container { + + #tabbrowser-tabs:not([secondarytext-unsupported]) & { + display: flex; + align-items: center; + padding-left: 10px; + } + } + } + + &:active, + .zen-sidebar-panel-button:active { + transform: scale(0.96) !important; + } + + &[pinned] { + margin: 0 !important; + } + } + #tabbrowser-arrowscrollbox::part(scrollbox) { + /* We have the pinned tabs on the top, next to each other, + * and the rest of the tabs are below them. */ + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr)); + padding: calc(var(--zen-tabbrowser-padding) / 2); + } + + .tabbrowser-tab:not([pinned]), + #tabbrowser-arrowscrollbox-periphery { + grid-column: 1 / -1; + } + + .tabbrowser-tab[pinned] { + grid-column: span 1; + min-width: 100%; + } + + #zen-sidebar-icons-wrapper { + width: -moz-available; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(37px, 1fr)); + transition: .1s; + } + + #zen-sidebar-icons-wrapper::before { + width: 100%; + } + } + + /* Display the vertical tabs on the right side */ + @media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) { + #navigator-toolbox { + order: 4; + padding-left: 0; + } + + @media (-moz-bool-pref: "zen.view.sidebar-expanded") { + #navigator-toolbox { + padding-left: 5px; + } + } + + #zen-sidebar-splitter { + order: 3; + } + + #tabbrowser-tabbox { + padding-left: 10px; + } + + #tabbrowser-tabpanels .browserSidebarContainer { + margin-right: 0 !important; + } + } +} diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared.css b/src/browser/base/content/zen-styles/zen-theme.css similarity index 69% rename from src/toolkit/themes/shared/in-content/zen-common-shared.css rename to src/browser/base/content/zen-styles/zen-theme.css index 829f75d2b..56f6ea438 100644 --- a/src/toolkit/themes/shared/in-content/zen-common-shared.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -1,27 +1,16 @@ -/* - * 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("zen-common-shared-ui-override.css"); +/* 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. - */ - - /** Primary colors examples: - * - green: #96D785; - * - blue: #0b57d0; - * - yellow: #F8BC48; - */ - - /** Primary color will be injected by the theme as `--zen-primary-color` */ - --zen-primary-color: #aac7ff; /* This is the default blue color, in case the theme doesn't provide a primary color */ + * in the preferences page. + */ /** Zen colors are generated automatically from the primary color */ --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%); @@ -37,6 +26,8 @@ --zen-dialog-background: var(--zen-colors-tertiary); --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f1f1f1 92%); + --zen-secondary-btn-color: var(--zen-colors-primary-foreground); + --in-content-primary-button-background: light-dark( color-mix(in srgb, var(--zen-primary-color) 35%, black 65%), color-mix(in srgb, var(--zen-primary-color) 35%, white 65%) @@ -50,7 +41,6 @@ --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; - --zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%); --in-content-accent-color: var(--zen-colors-primary) !important; @@ -65,7 +55,6 @@ ) !important; --button-bgcolor: var(--in-content-button-background) !important; --button-hover-bgcolor: var(--in-content-button-background-hover) !important; - --zen-secondary-btn-color: var(--zen-colors-primary-foreground); --focus-outline-color: var(--button-bgcolor) !important; --in-content-button-text-color: var(--zen-secondary-btn-color) !important; @@ -74,7 +63,7 @@ --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-primary-color: var(--in-content-primary-button-text-color) !important; --in-content-page-background: var(--zen-colors-tertiary) !important; --zen-in-content-dialog-background: var(--zen-colors-tertiary); @@ -85,9 +74,40 @@ /* Other colors */ --urlbar-box-bgcolor: var(--zen-urlbar-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)) !important; + --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77)); - --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%); + /* Constants */ + --zen-element-separation: .5rem; + + /* XUL */ + --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b); + --zen-appcontent-border: 1px solid var(--zen-colors-border); + --zen-panel-radius: var(--zen-border-radius); + --zen-browser-border-radius: var(--zen-panel-radius); + + --toolbarbutton-border-radius: 6px; + + --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; + + --input-bgcolor: var(--zen-colors-tertiary) !important; + --input-border-color: var(--zen-input-border-color) !important; + --zen-themed-toolbar-bg: var(--zen-colors-tertiary); + + --toolbar-field-background-color: var(--zen-colors-input-bg); + --arrowpanel-background: var(--zen-dialog-background) !important; } @media (prefers-color-scheme: dark) { @@ -107,18 +127,12 @@ --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%, black 92%); - - --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%); } } -window#commonDialogWindow { - background-color: var(--zen-in-content-dialog-background) !important; -} - -@media (-moz-bool-pref: "zen.theme.pill-button") { - :host(:is(.anonymous-content-host, notification-message)), +@media not (-moz-bool-pref: "zen.theme.toolbar-themed") { :root { - --zen-button-border-radius: 20px; + --toolbar-bgcolor: light-dark(white, #1b1b1b) !important; + --zen-themed-toolbar-bg: var(--toolbar-bgcolor); } } diff --git a/src/browser/base/content/zen-styles/zen-toolbar.css b/src/browser/base/content/zen-styles/zen-toolbar.css new file mode 100644 index 000000000..9317a4128 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-toolbar.css @@ -0,0 +1,8 @@ + +#nav-bar { + background: transparent; +} + +:root[inDOMFullscreen="true"] #zen-appcontent-navbar-container { + display: none; +} diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css new file mode 100644 index 000000000..c7ccc31fb --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -0,0 +1,151 @@ +/* URL and tool bars */ + +#urlbar { + --toolbarbutton-border-radius: 999px; + border: transparent; + overflow: hidden; + padding: 1px; + border-radius: var(--toolbarbutton-border-radius); +} + +#urlbar[focused="true"][breakout-extend="true"] { + overflow: visible; +} + +#urlbar { + border: 1px solid light-dark(rgba(0,0,0,.2), rgba(255,255,255,.2)) +} + +#searchbar:focus-within { + border-color: transparent !important; +} + +#urlbar[focused="true"] { + box-shadow: var(--panel-shadow) !important; +} + +#urlbar[focused="true"] > #urlbar-background { + background: var(--zen-dialog-background) !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 .urlbar-page-action, +#urlbar #tracking-protection-icon-container, +#urlbar:not([extend="true"]) #identity-box:not(.chromeUI) #identity-icon-box { + border-radius: 999px; +} + +#urlbar[breakout-extend="true"] { + --toolbarbutton-border-radius: 6px; +} + +#identity-icon-box { + background: var(--zen-colors-secondary) !important; +} + +#urlbar:is([focused], [open]) > #urlbar-background, #searchbar:focus-within { + background: var(--urlbar-box-bgcolor); +} + +#identity-icon-label { + padding-inline-start: 8px !important; +} + +#urlbar #identity-box.chromeUI #identity-icon-box { + border-radius: 5px !important; +} + +#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI #identity-icon-box { + border-radius: 20px 10px 10px 20px !important; +} + +#urlbar .urlbar-page-action, +#urlbar #identity-box #identity-icon-box, +#urlbar #tracking-protection-icon-container { + margin: 0 1px; +} + +#urlbar:not([extend="true"]) #identity-box #identity-icon-box { position: relative;} + +#urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) #identity-icon-box { + margin-right: 5px; +} + +#urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) { + margin-inline-end: 0 !important; +} + +.urlbar-page-action { + width: calc(var(--urlbar-min-height) - 5px - 2 * var(--urlbar-container-padding)) !important; + height: calc(var(--urlbar-min-height) - 5px - 2 * var(--urlbar-container-padding)) !important; + padding: 0 !important; + justify-content: center !important; + align-items: center !important; +} + +toolbar .toolbarbutton-1:not(.unified-extensions-item-action-button) { + & > .toolbarbutton-icon, + & > .toolbarbutton-badge-stack { + width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; + height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; + } +} + +toolbar .zen-sidebar-panel-button { + & > .toolbarbutton-icon, + & > .toolbarbutton-badge-stack { + width: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important; + height: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important; + } +} + +#identity-permission-box { + margin: 0 5px 0 0 !important; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])) #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; +} + +#notification-popup-box { + border-radius: 999px; + margin-right: 5px; + transition: .2s; + height: 100%; + padding: 7px; +} + +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: 20px; + min-width: 20px !important; + justify-content: center; +} + +#downloadsHistory { + margin-top: 5px +} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css new file mode 100644 index 000000000..b4abae549 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -0,0 +1,184 @@ + +#zen-workspaces-button { + border: 1px solid var(--zen-colors-border); + border-radius: 50px; + height: calc(var(--zen-sidebar-action-button-width) - 10px) !important; + margin-bottom: .1rem !important; + justify-content: center; + align-items: center; + display: flex; +} + +#zen-workspaces-button .zen-workspace-sidebar-name { + margin-left: .1rem; + display: none; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +@media (-moz-bool-pref: "zen.view.sidebar-expanded") { + #zen-workspaces-button .zen-workspace-sidebar-name { + display: block; + } + + #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] { + display: none; + } + + #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name { + margin-left: 0; + } + + #zen-workspaces-button { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: flex; + padding: 2px 10px; + width: calc(100% - var(--zen-tabbrowser-padding) * 8) !important; + } +} + +/* Workspaces Panel UI */ + +#PanelUI-zen-workspaces { + --panel-width: 320px; + --panel-padding: 0; +} + +#PanelUI-zen-workspaces > panelmultiview { + align-items: flex-start; +} + +#PanelUI-zen-workspaces panelmultiview panelview { + position: relative; + padding: 15px; + width: var(--panel-width); + min-height: 150px; +} + +#PanelUI-zen-workspaces-create-input { + margin-top: 10px; +} + +#PanelUI-zen-workspaces-create-icons-container toolbarbutton { + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid transparent; + border-radius: 7px; +} + +#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"] { + border-color: var(--zen-colors-secondary); +} + +#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-icon { + display: none; +} + +#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-text { + min-width: unset; +} + +#PanelUI-zen-workspaces-create-icons-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); + gap: 8px; +} + +#PanelUI-zen-workspaces-list { + display: flex; + flex-direction: column; +} + +#PanelUI-zen-workspaces-list[empty="true"] { + font-weight: 600; + padding: 10px; + width: 100%; + text-align: start; + opacity: 0.5; +} + +#PanelUI-zen-workspaces-current-info toolbarbutton:last-child { + margin-bottom: 0 !important; +} + +#PanelUI-zen-workspaces-list toolbarbutton, +#PanelUI-zen-workspaces-current-info toolbarbutton { + padding: 5px; + border-radius: 7px; + + margin-left: 0 !important; + margin-right: 0 !important; + + display: flex; + align-items: center; + + &:first-child { + margin-top: 10px; + } + + & .zen-workspace-icon { + width: 30px; + height: 30px; + border-radius: 7px; + margin-right: 10px; + border: 1px solid var(--zen-colors-border); + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; + } + + & .zen-workspace-name { + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + & .zen-workspace-actions { + display: none; + margin: 0; + margin-left: auto !important; + } + + &:hover .zen-workspace-actions, + & .zen-workspace-actions[active="true"] { + display: flex; + } +} + +#PanelUI-zen-workspaces-current-info toolbarbutton:first-child { + margin-bottom: 10px; + margin-top: 5px; +} + +#PanelUI-zen-workspaces-view vbox:nth-child(2) { + margin-top: 10px; +} + +#PanelUI-zen-workspaces-new { + margin-left: auto; + min-height: 1px !important; + padding: 3px; + border-radius: 4px; + width: 20px; + height: 20px; +} + +#PanelUI-zen-workspaces-create-footer { + padding-bottom: 0 !important; + margin-top: 20px; + margin-left: 0; + margin-bottom: 0 !important; + width: 100%; +} + +#PanelUI-zen-workspaces-create-footer button[default="true"] { + width: 100%; +} diff --git a/src/browser/base/content/zen-watermark.inc.xhtml b/src/browser/base/content/zen-watermark.inc.xhtml deleted file mode 100644 index 2ab313a6b..000000000 --- a/src/browser/base/content/zen-watermark.inc.xhtml +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/browser/base/content/zenThemeModifier.js b/src/browser/base/content/zenThemeModifier.js index 7acf89b3c..0c6a72569 100644 --- a/src/browser/base/content/zenThemeModifier.js +++ b/src/browser/base/content/zenThemeModifier.js @@ -12,6 +12,7 @@ */ const kZenThemeAccentColorPref = "zen.theme.accent-color"; +const kZenThemeBorderRadiusPref = "zen.theme.border-radius"; /** * ZenThemeModifier controls the application of theme data to the browser, @@ -32,13 +33,15 @@ var ZenThemeModifier = { init() { this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml"; this.listenForEvents(); - this.updateExtraBrowserStyles(); this.updateAllThemeBasics(); - this._zenInitBrowserLayout(); + this._onPrefersColorSchemeChange(); }, listenForEvents() { + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this)); + Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this)); + Services.prefs.addObserver(kZenThemeBorderRadiusPref, this.handleEvent.bind(this)); }, handleEvent(event) { @@ -51,6 +54,12 @@ var ZenThemeModifier = { */ updateAllThemeBasics() { this.updateAccentColor(); + this.updateBorderRadius(); + }, + + updateBorderRadius() { + const borderRadius = Services.prefs.getIntPref(kZenThemeBorderRadiusPref, 4); + document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px"); }, /** @@ -66,96 +75,8 @@ var ZenThemeModifier = { } }, - updateExtraBrowserStyles() { - // If we are in the main browser window, we can add some extra styles. - if (!this._inMainBrowserWindow) return; - this._changeSidebarLocation(); - }, - - _changeSidebarLocation() { - const kElementsToAppend = [ - "sidebar-splitter", - "sidebar-box", - "navigator-toolbox", - ]; - const wrapper = document.getElementById("zen-tabbox-wrapper"); - const appWrapepr = document.getElementById("zen-sidebar-box-container"); - for (let id of kElementsToAppend) { - const elem = document.getElementById(id); - if (elem) { - wrapper.prepend(elem); - } - } - appWrapepr.setAttribute("hidden", "true"); - - // Set a splitter to navigator-toolbox - const splitter = document.createXULElement("splitter"); - splitter.setAttribute("id", "zen-sidebar-splitter"); - splitter.setAttribute("orient", "horizontal"); - splitter.setAttribute("resizebefore", "sibling"); - splitter.setAttribute("resizeafter", "none"); - const titlebar = document.getElementById("navigator-toolbox"); - titlebar.insertAdjacentElement("afterend", splitter); - }, - - _zenInitBrowserLayout() { - if (!this._inMainBrowserWindow) return; - if (this.__hasInitBrowserLayout) return; - this.__hasInitBrowserLayout = true; - this.openWatermark(); - 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 - document.getElementById("zen-appcontent-navbar-container") - .appendChild(document.getElementById("tab-notification-deck-template")); - - gZenVerticalTabsManager.init(); - gZenCompactModeManager.init(); - gZenKeyboardShortcuts.init(); - + _onPrefersColorSchemeChange() { this._updateZenAvatar(); - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this)); - - function throttle(f, delay) { - let timer = 0; - return function(...args) { - clearTimeout(timer); - timer = setTimeout(() => f.apply(this, args), delay); - } - } - - new ResizeObserver(throttle( - this._updateTabsToolbar.bind(this), 1000 - )).observe(document.getElementById("tabbrowser-tabs")); - - this.closeWatermark(); - }, - - _onPrefersColorSchemeChange(event) { - this._updateZenAvatar(); - }, - - _updateTabsToolbar() { - // Set tabs max-height to the "toolbar-items" height - const toolbarItems = document.getElementById("tabbrowser-tabs"); - const tabs = document.getElementById("tabbrowser-arrowscrollbox"); - tabs.style.maxHeight = '0px'; // reset to 0 - const toolbarRect = toolbarItems.getBoundingClientRect(); - // -5 for the controls padding - tabs.style.maxHeight = toolbarRect.height - 5 + "px"; - console.info("ZenThemeModifier: set tabs max-height to", toolbarRect.height + "px"); }, _updateZenAvatar() { @@ -184,23 +105,6 @@ var ZenThemeModifier = { let scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"; return `${withoutExtension}-${scheme}.svg`; }, - - openWatermark() { - if (!Services.prefs.getBoolPref("zen.watermark.enabled", false)) { - return; - } - const watermark = document.getElementById("zen-watermark"); - if (watermark) { - watermark.removeAttribute("hidden"); - } - }, - - closeWatermark() { - const watermark = document.getElementById("zen-watermark"); - if (watermark) { - watermark.setAttribute("hidden", "true"); - } - }, }; if (typeof Services !== "undefined") diff --git a/src/browser/base/jar-mn.patch b/src/browser/base/jar-mn.patch index 64c789b58..667117056 100644 --- a/src/browser/base/jar-mn.patch +++ b/src/browser/base/jar-mn.patch @@ -1,12 +1,12 @@ diff --git a/browser/base/jar.mn b/browser/base/jar.mn -index e3eb0e6e5f30152905456a07cfe532fe173375fb..9d356d62421d779f9e16f6761cce97826c7943ed 100644 +index c724d243dc62a039d75aaee25cc956193589d9dc..04819ec5e17bd2023dbfb3e9dd812f832d9a7e92 100644 --- a/browser/base/jar.mn +++ b/browser/base/jar.mn -@@ -105,3 +105,6 @@ browser.jar: +@@ -103,3 +103,6 @@ browser.jar: # L10n resources and overrides. % override chrome://global/locale/appstrings.properties chrome://browser/locale/appstrings.properties + +#include content/zen-avatars/jar.inc.mn -+#include content/zen-scripts.jar.inc.mn ++#include content/zen-assets.jar.inc.mn \ No newline at end of file diff --git a/src/browser/themes/shared/browser-shared-css.patch b/src/browser/themes/shared/browser-shared-css.patch index f048fce61..5590be96c 100644 --- a/src/browser/themes/shared/browser-shared-css.patch +++ b/src/browser/themes/shared/browser-shared-css.patch @@ -1,27 +1,8 @@ diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css -index f2171eb033a1143870f4708c63f565fabb535c4b..a21631e56e74d5d1887554d2752a612887ed20c5 100644 +index f2171eb033a1143870f4708c63f565fabb535c4b..4280bc4b0f7cdbd94179fa2111f8001a331ea42b 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css -@@ -27,6 +27,9 @@ - @import url("chrome://browser/skin/UITour.css"); - @import url("chrome://browser/skin/formautofill-notification.css"); - -+@import url("chrome://global/skin/zen-global-shared.css"); -+@import url("chrome://browser/skin/zen-browser-shared.css"); -+ - @namespace html url("http://www.w3.org/1999/xhtml"); - - :root, -@@ -73,7 +76,7 @@ body { - --short-notification-gradient: #9059FF; - - --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent); -- --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent); -+ --button-hover-bgcolor: color-mix(in srgb, currentColor 15%, transparent); - --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent); - --button-color: currentColor; - --button-primary-bgcolor: AccentColor; -@@ -179,7 +182,6 @@ body { +@@ -179,7 +179,6 @@ body { appearance: none; /* Toolbar / content area border */ @@ -29,7 +10,7 @@ index f2171eb033a1143870f4708c63f565fabb535c4b..a21631e56e74d5d1887554d2752a6128 background-color: var(--toolbox-non-lwt-bgcolor); color: var(--toolbox-non-lwt-textcolor); -@@ -188,37 +190,13 @@ body { +@@ -188,7 +187,6 @@ body { transition: background-color var(--inactive-window-transition); &:-moz-window-inactive { @@ -37,34 +18,35 @@ index f2171eb033a1143870f4708c63f565fabb535c4b..a21631e56e74d5d1887554d2752a6128 color: var(--toolbox-non-lwt-textcolor-inactive); } - &[fullscreenShouldAnimate] { +@@ -196,6 +194,31 @@ body { transition: 0.8s margin-top ease-out; } -- -- :root[customizing] & { -- border-bottom-style: none; -- } -- -- :root[lwtheme] & { -- background-image: var(--lwt-additional-images); -- background-repeat: var(--lwt-background-tiling); -- background-position: var(--lwt-background-alignment); -- background-color: var(--lwt-accent-color); -- color: inherit; -- -- &:-moz-window-inactive { -- background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); -- } -- } -- -- /* When a theme defines both theme_frame and additional_backgrounds, show -- the latter atop the former. */ -- :root[lwtheme-image] & { -- background-image: var(--lwt-header-image), var(--lwt-additional-images); -- background-repeat: no-repeat, var(--lwt-background-tiling); -- background-position: right top, var(--lwt-background-alignment); -- } -+ - } - .browser-toolbar { ++ ++ :root[customizing] & { ++ border-bottom-style: none; ++ } ++ ++ :root[lwtheme] & { ++ background-image: var(--lwt-additional-images); ++ background-repeat: var(--lwt-background-tiling); ++ background-position: var(--lwt-background-alignment); ++ background-color: var(--lwt-accent-color); ++ color: inherit; ++ ++ &:-moz-window-inactive { ++ background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); ++ } ++ } ++ ++ /* When a theme defines both theme_frame and additional_backgrounds, show ++ the latter atop the former. */ ++ :root[lwtheme-image] & { ++ background-image: var(--lwt-header-image), var(--lwt-additional-images); ++ background-repeat: no-repeat, var(--lwt-background-tiling); ++ background-position: right top, var(--lwt-background-alignment); ++ } ++ + :root[customizing] & { + border-bottom-style: none; + } diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css index a81d1a241..4df1ac398 100644 --- a/src/browser/themes/shared/preferences/zen-preferences.css +++ b/src/browser/themes/shared/preferences/zen-preferences.css @@ -49,7 +49,8 @@ groupbox:has(+ .subcategory) { } .navigation { - padding: 50px; + padding: 4%; + background: var(--zen-colors-tertiary); } groupbox button { diff --git a/src/browser/themes/shared/sidebar-css.patch b/src/browser/themes/shared/sidebar-css.patch deleted file mode 100644 index 65f8a2382..000000000 --- a/src/browser/themes/shared/sidebar-css.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css -index a9b3886e1ff4a36c5bd161985719f66a41d95458..242b3ad30785bed1937d9bf99e8abc7427111541 100644 ---- a/browser/themes/shared/sidebar.css -+++ b/browser/themes/shared/sidebar.css -@@ -2,6 +2,8 @@ - * 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/skin/zen-sidebar.css"); -+ - @namespace html url("http://www.w3.org/1999/xhtml"); - - :root { diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css deleted file mode 100644 index 78ba037f0..000000000 --- a/src/browser/themes/shared/zen-browser-shared.css +++ /dev/null @@ -1,1032 +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("zen-panel-ui.css"); -@import url("zen-icons/icons.css"); -@import url("zen-decks.css"); - -:root { - --toolbarbutton-border-radius: 6px !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 !important; - - --input-bgcolor: var(--zen-colors-tertiary) !important; - --input-border-color: var(--zen-input-border-color) !important; - --zen-themed-toolbar-bg: var(--zen-colors-tertiary); - - --toolbar-field-background-color: var(--zen-colors-input-bg) !important; -} - -@media not (-moz-bool-pref: "zen.theme.toolbar-themed") { - :root { - --toolbar-bgcolor: light-dark(white, #1b1b1b) !important; - --zen-themed-toolbar-bg: var(--toolbar-bgcolor); - } -} - -#PersonalToolbar:not([collapsed="true"]) { - /*border-top: 1px solid light-dark(#ddd, #4a4a4a);*/ - padding: 5px 0; - padding-inline: 15px !important; -} - -/* URL and tool bars */ - -#urlbar { - --toolbarbutton-border-radius: 999px; - border: transparent; - overflow: hidden; - padding: 1px; - border-radius: var(--toolbarbutton-border-radius); -} - -#urlbar[focused="true"][breakout-extend="true"] { - overflow: visible; -} - -#urlbar { - border: 1px solid light-dark(rgba(0,0,0,.2), rgba(255,255,255,.2)) -} - -#searchbar:focus-within { - border-color: transparent !important; -} - -#urlbar[focused="true"] { - box-shadow: var(--panel-shadow) !important; -} - -#urlbar[focused="true"] > #urlbar-background { - background: var(--zen-dialog-background) !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 .urlbar-page-action, -#urlbar #tracking-protection-icon-container, -#urlbar:not([extend="true"]) #identity-box:not(.chromeUI) #identity-icon-box { - border-radius: 999px; -} - -#urlbar[breakout-extend="true"] { - --toolbarbutton-border-radius: 6px; -} - -/*#urlbar:not([breakout-extend="true"]) #urlbar-input { - text-align: center; - transition: .2s; -}*/ - -#identity-icon-label { - padding-inline-start: 8px !important; -} - -#urlbar #identity-box.chromeUI #identity-icon-box { - border-radius: 5px !important; -} - -#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI #identity-icon-box { - border-radius: 20px 10px 10px 20px !important; -} - -#urlbar .urlbar-page-action, -#urlbar #identity-box #identity-icon-box, -#urlbar #tracking-protection-icon-container { - margin: 0 1px; -} - -#urlbar:not([extend="true"]) #identity-box #identity-icon-box { position: relative;} - -/* TODO: this does NOT show up! */ -/* #urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) #identity-icon-box::after { - content: ''; - position: absolute; - top: 50%; - right: -5px; - height: calc(100% - 5px); - width: 1px; - background: var(--zen-dialog-border-color); - transition: .1s; - transform: translateY(-50%); -} */ - -#urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) #identity-icon-box { - margin-right: 5px; -} - -#urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) { - margin-inline-end: 0 !important; -} - -.urlbar-page-action { - width: calc(var(--urlbar-min-height) - 5px - 2 * var(--urlbar-container-padding)) !important; - height: calc(var(--urlbar-min-height) - 5px - 2 * var(--urlbar-container-padding)) !important; - padding: 0 !important; - justify-content: center !important; - align-items: center !important; -} - -toolbar .toolbarbutton-1:not(.unified-extensions-item-action-button) { - & > .toolbarbutton-icon, - & > .toolbarbutton-badge-stack { - width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; - height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; - } -} - -toolbar .zen-sidebar-panel-button { - & > .toolbarbutton-icon, - & > .toolbarbutton-badge-stack { - width: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important; - height: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important; - } -} - -#identity-permission-box { - margin: 0 5px 0 0 !important; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; -} - -#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])) #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; -} - -#notification-popup-box { - border-radius: 999px; - margin-right: 5px; - transition: .2s; - height: 100%; - padding: 7px; -} - -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: 20px; - min-width: 20px !important; - justify-content: center; -} - -#downloadsHistory { - margin-top: 5px -} - -/* Toolbars customization */ - -#titlebar { - height: 100%; -} - -#navigator-toolbox { - min-width: 55px; - - margin-top: 0 !important; /* Issue #156 */ -} - -:root[inFullscreen="true"] #navigator-toolbox { - display: none; -} - -#zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox { - transition: .3s !important; -} - -#navigator-toolbox toolbar#TabsToolbar { - margin: var(--zen-appcontent-separator-from-window); - overflow: hidden; - transition: .2s; - flex-direction: column !important; - padding: 5px 0; - margin-right: 0 !important; - -moz-window-dragging: no-drag; - - --zen-sidebar-action-button-width: 38px; - padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */ -} - -#TabsToolbar-customization-target { - flex-direction: column; -} - -:root[customizing] .customization-target:not(#widget-overflow-fixed-list) { - min-width: 0 !important; -} - -toolbarpaletteitem { - justify-content: center !important; -} - -toolbarbutton#scrollbutton-down, -toolbarbutton#scrollbutton-up { - display: none !important; -} - -#toolbar-menubar { - display: none; -} - -.tab-label-container { - display: none; -} - -.tab-icon-stack > .tab-icon-image, -.tab-icon-stack > .tab-throbber { - width: var(--zen-browser-tab-icon-size); - height: var(--zen-browser-tab-icon-size); - margin-inline-end: 0 !important; -} - -.tab-icon-stack .tab-icon-image { - transform: scale(0.5); - opacity: 0; - animation: zen-zoom-in 0.12s ease-in-out 0.3s forwards; -} - -@keyframes zen-zoom-in { - from { - transform: scale(0.5); - opacity: 0; - } - to { - opacity: 1; - transform: scale(1); - } -} - -.tab-background { - display: none; -} - -.tabbrowser-tab { - --zen-browser-tab-icon-size: 18px; - --tab-min-width: 36px !important; - margin: 0 auto !important; - border-radius: 8px; - position: relative; - color-scheme: var(--tab-selected-color-scheme); - border: 2px solid transparent; - background: transparent; - padding: 0 !important; - align-items: center; - min-height: var(--tab-min-width); /* Make a box */ - animation: zen-slide-in 0.3s; - width: calc(var(--zen-browser-tab-icon-size) + 2px); - transition: .1s background, .1s border-color; - min-width: var(--tab-min-width); - - display: flex !important; - justify-content: center; - align-items: center; -} - -@media (-moz-bool-pref: "zen.tabs.dim-pending") { - .tabbrowser-tab[pending]:not(:hover) { - opacity: 0.5; - } -} - -.tabbrowser-tab[hidden="true"] { - display: none !important; -} - -.tabbrowser-tab:hover { - background: var(--toolbarbutton-hover-background); -} - -.tabbrowser-tab:active, -.zen-sidebar-panel-button:active { - transform: scale(0.9) !important; -} - -.tab-stack { - width: 30px !important; - height: 30px !important; - min-width: 30px !important; - min-height: 30px !important; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} - -@keyframes zen-slide-in { - from { - transform: translateX(-10px); - opacity: 0; - } - to { - transform: translateX(0); - opacity: 1; - } -} - -.tabbrowser-tab:not([fadein]) { - display: none !important; -} - -.tabbrowser-tab:is([multiselected="true"], [selected]) { - background: var(--toolbarbutton-hover-background); -} - -#private-browsing-indicator-with-label { - display: none !important; -} - -.tabbrowser-tab::after {/* Containers */ - background: var(--identity-tab-color, transparent); - border-radius: 2px; - height: 80%; - width: 2px; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: -2px; - content: ''; - pointer-events: none; -} - -.tabbrowser-tab { - margin-inline-start: 0 !important; - margin: 0 auto !important; -} - -.tabbrowser-tab[pinned] { - position: relative !important; - display: flex !important; -} - -#tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of [fadein]:not([pinned]):not([hidden])) { - margin-top: 15px !important; - position: relative; - overflow: visible; - - & .tab-stack::before { - content: ''; - position: absolute; - top: -11px; - left: 0; - width: 100%; - height: 1.5px; - border-radius: 1px; - background: var(--zen-colors-border); - } -} - -.tab-close-button { - position: absolute; - display: none; - left: 0; - top: 50%; -} - -.tabbrowser-tab[open="true"]:hover .tab-close-button { - /* TODO: fix this */ - /*display: block;*/ -} - -.tab-content { - padding: 0 !important; - width: fit-content; -} - -.toolbar-items > toolbartabstop:first-child { - display: none; -} - -#nav-bar > *:not(.titlebar-buttonbox-container) { - padding-top: 5px; - padding-bottom: 5px; -} - -#TabsToolbar-customization-target { - height: 100%; -} - -#tabbrowser-tabs { - margin-inline-start: 0 !important; - padding-inline-start: 0 !important; - border: none !important; - /*background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));*/ - margin: 0 !important; - border: none; - height: 100%; -} - -#tabbrowser-arrowscrollbox { - margin: 3px 0 !important; -} - -#alltabs-button stack { - transform: rotate(-90deg); -} - -.tab-icon-overlay { - margin-inline-end: 0 !important; - display: none !important; /* TODO: fix this */ -} - -/*#tabbrowser-arrowscrollbox { - &::part(scrollbox-clip) { - max-height: 405px; - } -}*/ - -#zen-tabbox-wrapper { - position: relative; -} - -.footer-button { - padding: var(--zen-button-padding) !important; - border-radius: var(--zen-button-border-radius) !important; -} - -.footer-button:not([default], .primary) { - color: var(--zen-secondary-btn-color) !important; -} - -.footer-button:is([default], .primary) { - --focus-outline-color: var(--zen-primary-btn-color) !important; -} - -/** Specific dialogs override */ - -#identity-popup-multiView toolbarseparator, -#editBookmarkHeaderSeparator { - display: none; -} - -#identity-popup-more-info-footer toolbarseparator { - display: block; -} - -#editBMPanel_foldersExpander { - display: none; -} - -#editBookmarkPanelContent > label:not(.editBMPanel_nameRow) { - padding-top: 5px; -} - -panelmultiview { - display: flex; - flex-direction: column; - align-items: center; -} - -/** No space in panels overrides */ - -#tabbrowser-tabbox { - background: var(--toolbar-bgcolor); - display: flex; - flex-direction: row; -} - -:root:not([inDOMFullscreen="true"]) #tabbrowser-tabpanels { - background: transparent !important; - margin-right: 0; -} - -:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - border-radius: var(--zen-browser-border-radius); - border: var(--zen-appcontent-border); - width: -moz-available; - margin: 0 10px 10px 0; -} - -:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer { - margin: 0 7px 7px 0; -} - -#tabbrowser-tabbox #tabbrowser-tabpanels .browserStack > browser { - border-radius: var(--zen-browser-border-radius); - clip-path: inset(0px 0px 0px round var(--zen-browser-border-radius) 0) !important; -} - -#urlbar[breakout]:not([breakout-extend="true"]) { - top: unset; -} - -#zen-main-app-wrapper { - background: var(--zen-main-browser-background); -} - -@media not (-moz-bool-pref: "zen.view.compact") { - #sidebar-box { - margin-top: 0 !important; - } -} - -@media (-moz-bool-pref: "zen.view.compact") { - :root[sizemode="fullscreen"], - #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; } - - #navigator-toolbox { - --zen-compact-toolbox-margin-single: 15px; - --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single); - position: absolute !important; - display: block; - transition: 50ms ease-in !important; - transform: translateX(calc(-100% + var(--zen-compact-toolbox-margin-single) + 2px)) !important; - opacity: 0; - line-height: 0; - z-index: 1; - height: 100%; - margin: 0; - padding: var(--zen-compact-toolbox-margin) !important; - - & #titlebar { - border: 1px solid var(--zen-colors-border); - background: var(--zen-colors-tertiary) !important; - padding: 0 5px; - border-radius: 11px; - } - } - - @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - width: fit-content !important; - } - } - - @media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important; - } - } - - #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])), - #sidebar-box:not([positionend="true"]) { - margin-right: 0 !important; - margin-left: 10px !important; - } - - #sidebar-box[positionend="true"] { - margin-left: 0 !important; - margin-right: 10px !important; - } - - #sidebar-splitter { - margin: 0 !important; - } - - @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") { - #navigator-toolbox { - /* Remove the top margin */ - --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 3) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single); - } - - #zen-sidebar-web-panel-wrapper, - #sidebar-box { - margin-top: 0 !important; - } - } - - #navigator-toolbox:hover, - #navigator-toolbox:focus-within, - #navigator-toolbox[zen-user-show], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) { - transition-delay: 33ms !important; - transform: none !important; - opacity: 1; - } - - #navigator-toolbox > *{ line-height: normal; pointer-events: auto } - - #navigator-toolbox, - #navigator-toolbox > *{ - -moz-appearance: none !important; - } - - #zen-sidebar-splitter { - display: none !important; - } - - /* Don't apply transform before window has been fully created */ - :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important } - - :root[customizing] #navigator-toolbox{ - position: relative !important; - transform: none !important; - opacity: 1 !important; - } - - #navigator-toolbox[inFullscreen] > #PersonalToolbar, - #PersonalToolbar[collapsed="true"]{ display: none } - - :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - margin-left: 10px !important; - margin-right: 10px !important; - } - - @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") { - #zen-appcontent-navbar-container { - --urlbar-height: unset; - transition: .2s ease-in-out; - transform: translateY(calc(-100% + 5px)); - opacity: 0; - position: absolute; - width: 100%; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - border-bottom: 1px solid var(--zen-colors-border); - top: 0; - background: var(--zen-colors-tertiary); - z-index: 2; - transition: .2s ease-in-out; - } - - #zen-appcontent-navbar-container:hover, - #zen-appcontent-navbar-container:focus-within, - #zen-appcontent-navbar-container[zen-user-show], - #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container, - #zen-appcontent-navbar-container:has(*[open="true"]) { - transform: translateY(0); - opacity: 1; - } - - :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - margin-top: 10px !important; - } - - #titlebar { - padding-top: 5px !important; - } - - #zen-sidebar-web-panel-wrapper { - margin-top: 10px !important; - } - } -} - -:root:is([chromehidden~="location"],[chromehidden~="toolbar"]) { - --zen-browser-border-radius: 0 !important; - - & #navigator-toolbox { - display: none; - } - - & #tabbrowser-tabpanels { - margin: 0 !important; - - & .browserSidebarContainer { - margin: 0 !important; - } - } - - & #zen-sidebar-splitter { - display: none !important; - } -} - -/* Screenshots */ - -#screenshotsPagePanel { - position: absolute !important; - top: 3%; - right: 1.5%; -} - -/* Watermark */ - -#zen-watermark { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--zen-main-browser-background); - display: flex; - justify-content: center; - align-items: center; - z-index: 9999; -} - -#zen-watermark image { - opacity: .2; - filter: grayscale(100%); - width: 200px; - height: 200px; -} - -#zen-watermark[hidden="true"] { - transition: 0.6s; - transition-delay: .5s; - opacity: 0; - pointer-events: none; -} - -#zen-workspaces-button .zen-workspace-sidebar-name { - margin-left: 10px; - display: none; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -@media not (-moz-bool-pref: "zen.watermark.enabled") { - #zen-watermark { - display: none; - } -} - -/* Expanded sidebar */ -#zen-sidebar-splitter { - display: none; - opacity: 0; -} - -@media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #zen-workspaces-button .zen-workspace-sidebar-name { - display: block; - } - - #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] { - display: none; - } - - #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name { - margin-left: 0; - } - - #navigator-toolbox { - --zen-navigation-toolbar-min-width: 160px; - min-width: var(--zen-navigation-toolbar-min-width); - align-items: start; - padding-left: 10px; - padding-right: 5px; - transition: .2s; - width: 170px; - border: none; - } - - :root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter { - display: block; - width: 1px; - } - - .tab-label-container { - display: block; - } - - #titlebar, - #TabsToolbar, - #TabsToolbar .toolbar-items { - width: 100%; - align-items: flex-start; - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) { - width: 100% !important; - border-radius: 8px; - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover { - background: var(--button-hover-bgcolor); - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text, - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon, - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack { - background: transparent !important; - } - - #tabbrowser-arrowscrollbox-periphery { - margin-top: 5px; - } - - #tabbrowser-arrowscrollbox-periphery > toolbarbutton { - display: flex; - justify-content: center; - align-items: center; - } - - .tabbrowser-tab { - max-width: unset !important; - - &:not([pinned]) { - width: 100%; - - &:hover .tab-close-button { - display: block !important; - } - - & .tab-content { - position: relative; - width: 100%; - } - - & .tab-stack { - justify-content: start; - padding: 10px; - width: 100% !important; - } - - & .tab-label-container { - - #tabbrowser-tabs:not([secondarytext-unsupported]) & { - display: flex; - align-items: center; - padding-left: 10px; - } - } - } - - &:active, - .zen-sidebar-panel-button:active { - transform: scale(0.96) !important; - } - - &[pinned] { - margin: 0 !important; - } - } - #tabbrowser-arrowscrollbox::part(scrollbox) { - /* We have the pinned tabs on the top, next to each other, - * and the rest of the tabs are below them. */ - display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr)); - padding: 5px; - } - - .tabbrowser-tab:not([pinned]), - #tabbrowser-arrowscrollbox-periphery { - grid-column: 1 / -1; - } - - .tabbrowser-tab[pinned] { - grid-column: span 1; - min-width: 100%; - } - - #zen-workspaces-button { - overflow: hidden; - width: calc(100% - 40px) !important; - white-space: nowrap; - text-overflow: ellipsis; - display: flex; - padding: 2px 10px; - } - - #zen-sidebar-icons-wrapper { - width: 100%; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); - transition: .1s; - } - - #zen-sidebar-icons-wrapper::before { - width: 100%; - } -} - -/* Popup Search */ - -@media (-moz-bool-pref: "zen.theme.floating-urlbar") { - #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) { - #urlbar-input { - font-size: 16px !important; - } - - z-index: 2; - position: fixed !important; - bottom: auto !important; - top: 20vh !important; - padding-left: 6px !important; - padding-right: 8px !important; - - left: 18vw !important; - right: 18vw !important; - width: 64vw !important; - - &:after { - content: ""; - position: fixed; - pointer-events: none; - - width: 100vw; - height: 100vh; - - top: 0px; - left: 0px; - - background-color: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(5px); - - z-index: -1; - } - - #identity-box { - margin: auto 0; - height: 30px; - margin-right: 10px; - } - - .urlbar-go-button { - margin: auto 0; - } - } -} - -/** - * - * ZEN OVERRIDES - */ - -.content-prompt-dialog > .dialogOverlay { - align-content: start; -} - -.dialogBox:not(.spotlightBox) { - border: 1px solid var(--zen-dialog-border-color); -} - -#window-modal-dialog:not([zen-dialog-welcome-element="true"]) .dialogBox:not(.spotlightBox) { - transform: translateY(-9px); -} - -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox:not(.spotlightBox) { - margin: 0 !important; -} - -#window-modal-dialog[zen-dialog-welcome-element="true"], -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogOverlay, -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogFrame, -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox { - width: 100% !important; - height: 100% !important; - max-height: none !important; - max-width: none !important; -} - -#window-modal-dialog[zen-dialog-welcome-element="true"] { - --zen-welcome-dialog-space: 7px; - margin: 0 auto !important; - max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important; - max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important; - margin-top: var(--zen-welcome-dialog-space) !important; -} - -/* Display the vertical tabs on the right side */ - -@media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) { - #navigator-toolbox { - order: 4; - padding-left: 0; - } - - @media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - padding-left: 5px; - } - } - - #zen-sidebar-splitter { - order: 3; - } - - #tabbrowser-tabbox { - padding-left: 10px; - } - - #tabbrowser-tabpanels .browserSidebarContainer { - margin-right: 0 !important; - } -} diff --git a/src/browser/themes/shared/zen-decks.css b/src/browser/themes/shared/zen-decks.css deleted file mode 100644 index 8abfc2fcb..000000000 --- a/src/browser/themes/shared/zen-decks.css +++ /dev/null @@ -1,51 +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; -} - -#tabbrowser-tabpanels[zen-split-view="true"] > *:not([zen-split="true"]) { - flex: 0; - margin: 0 !important; -} - -#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split="true"] { - flex: 1; - margin-right: 5px !important; -} - -#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split-anim="true"] { - animation: zen-deck-fadeIn 0.2s forwards; -} - -#tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer[zen-split-active="true"] { - box-shadow: 0 0 0 2px var(--zen-primary-color) !important; -} - -#tabbrowser-tabpanels:has(> [zen-split="true"]) { - display: grid; - grid-gap: 0 5px !important; -} - -@keyframes zen-deck-fadeIn { - 0% { - transform: scale(0.9); - opacity: 0; - } - - 100% { - transform: scale(1); - opacity: 1; - } -} - -#zen-split-views-box:not([hidden="true"]) { - display: flex !important; -} diff --git a/src/browser/themes/shared/zen-panel-ui.css b/src/browser/themes/shared/zen-panel-ui.css deleted file mode 100644 index 179247d07..000000000 --- a/src/browser/themes/shared/zen-panel-ui.css +++ /dev/null @@ -1,395 +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-profiles { - --menu-panel-width: 19em; - position: relative; - padding-bottom: 5px; -} - -#PanelUI-zen-profiles-header { - width: 280px; - height: 130px; - background: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%); - position: relative; -} - -#PanelUI-zen-profiles-user-picture { - background-image: var(--avatar-image-url); - width: 75px; - height: 75px; - border: 4px var(--arrowpanel-background) solid; - background-color: var(--zen-colors-primary-foreground); - border-radius: 50%; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - margin: 0 auto; - transform: translateY(100%); -} - -.PanelUI-zen-profiles-item { - position: relative; - display: flex; - padding: 6px 10px; - font: menu; - align-items: center; -} - -#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item { - margin-bottom: 2px; - border-radius: 5px; - margin: 2px 5px; -} - -#PanelUI-zen-profiles-list > toolbarseparator:first-child { - margin: 5px; -} - -.PanelUI-zen-profiles-item:hover { - background: var(--panel-item-hover-bgcolor); - color: inherit; -} - -.PanelUI-zen-profiles-item::after { - content: ''; - background-image: url("chrome://global/skin/icons/arrow-right.svg"); - background-size: 1em; - background-repeat: no-repeat; - background-position: center; - width: 1em; - height: 1em; - margin-left: auto; - pointer-events: none; - top: 50%; - right: 1em; - transform: translateY(-50%); - position: absolute; -} - -@media (prefers-color-scheme: dark) { - .PanelUI-zen-profiles-item::after { - filter: invert(1); - } -} - -#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-avatar { - width: 20px; - height: 20px; - border-radius: 5px; - margin: 1px 0.5em 1px 1px; -} - -#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-name { - font-weight: normal; - font-size: 15px; - margin-left: 5px; -} - -#PanelUI-zen-profiles-current-info { - --zen-separation-from-content: 35px; - margin-top: calc(var(--zen-separation-from-content) + 30px); /** Ignore the profile picture */ -} - -#PanelUI-zen-profiles-current-name { - font-size: 1.3em; - font-weight: 600; - line-height: 0.5; - padding: 5px 10px; - border-radius: 5px; - margin: 0 auto; -} - - -#PanelUI-zen-profiles toolbarbutton::after { - display: none; -} - -#PanelUI-zen-profiles toolbarbutton { - padding-left: 16px; - padding-right: 16px; -} - - -#PanelUI-zen-profiles toolbarbutton:last-child { - margin-bottom: 5px !important; -} - -#PanelUI-zen-profiles-current-profile-current { - font-size: 13px; - opacity: 0.5; - margin: 0 auto var(--zen-separation-from-content) auto; - font-size: 15px; - font-weight: 600; -} - - -#PanelUI-zen-profiles-actions { - color-scheme: dark; - position: absolute; - top: 10px; - right: 10px; - border-radius: 10px !important; - padding: 1px 10px !important; - transition: .1s; - color: light-dark(white, black); - background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); -} - -#PanelUI-zen-profiles-managePrfs:hover { - background: var(--panel-item-hover-bgcolor); -} - -#PanelUI-zen-profiles-actions toolbarbutton { - cursor: pointer; - padding: 0; -} - -#PanelUI-zen-profiles-actions toolbarbutton .toolbarbutton-icon { - width: 14px !important; -} - -#PanelUI-zen-profiles-actions toolbarbutton:not(:first-child) { - margin-left: 10px; -} - -#PanelUI-zen-profiles-actions toolbarbutton label { - display: none !important; -} - -/* Split view panel */ - -#zenSplitViewModifierViewDefault { - min-width: 180px; - min-height: 180px; - - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - - gap: 10px; - padding: 15px; -} - -#zenSplitViewModifierViewDefault > vbox { - display: flex; - align-items: center; - flex-direction: column; - cursor: pointer; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview { - border-radius: 5px; - border: 1px solid var(--zen-colors-border); - width: 100px; - height: 70px; - overflow: hidden; - padding: 5px; - user-select: none; - font-weight: 500; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active { - box-shadow: 0 0 0 2px var(--zen-primary-color); - border-width: 0px; -} - -#zenSplitViewModifierViewDefault p { - margin-top: 5px; - margin-bottom: 0; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box { - background-color: var(--zen-colors-secondary); - border-radius: 3px; - width: 100%; - height: 100%; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep { - display: flex; - flex-direction: column; - justify-content: space-between; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child { - margin-top: 5px; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child { - margin-left: 5px; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid { - display: grid; - grid-template-areas: "a b" "c b"; - gap: 5px; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) { - grid-area: a; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) { - grid-area: b; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) { - grid-area: c; -} - -/* Workspaces */ - -#zen-workspaces-button { - border: 1px solid var(--zen-colors-border); - border-radius: 50px; - height: calc(var(--zen-sidebar-action-button-width) - 10px) !important; - margin-bottom: 5px !important; - justify-content: center; - align-items: center; - display: flex; -} - -#PanelUI-zen-workspaces { - --panel-width: 320px; - --panel-padding: 0; -} - -#PanelUI-zen-workspaces > panelmultiview { - align-items: flex-start; -} - -#PanelUI-zen-workspaces panelmultiview panelview { - position: relative; - padding: 15px; - width: var(--panel-width); - min-height: 150px; -} - -#PanelUI-zen-workspaces-create-input { - margin-top: 10px; -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton { - width: 30px; - height: 30px; - display: flex; - justify-content: center; - align-items: center; - border: 2px solid transparent; - border-radius: 7px; -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"] { - border-color: var(--zen-colors-secondary); -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-icon { - display: none; -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-text { - min-width: unset; -} - -#PanelUI-zen-workspaces-create-icons-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); - gap: 8px; -} - -#PanelUI-zen-workspaces-list { - display: flex; - flex-direction: column; -} - -#PanelUI-zen-workspaces-list[empty="true"] { - font-weight: 600; - padding: 10px; - width: 100%; - text-align: start; - opacity: 0.5; -} - -#PanelUI-zen-workspaces-current-info toolbarbutton:last-child { - margin-bottom: 0 !important; -} - -#PanelUI-zen-workspaces-list toolbarbutton, -#PanelUI-zen-workspaces-current-info toolbarbutton { - padding: 5px; - border-radius: 7px; - - margin-left: 0 !important; - margin-right: 0 !important; - - display: flex; - align-items: center; - - &:first-child { - margin-top: 10px; - } - - & .zen-workspace-icon { - width: 30px; - height: 30px; - border-radius: 7px; - margin-right: 10px; - border: 1px solid var(--zen-colors-border); - display: flex; - justify-content: center; - align-items: center; - font-weight: 600; - } - - & .zen-workspace-name { - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - & .zen-workspace-actions { - display: none; - margin: 0; - margin-left: auto !important; - } - - &:hover .zen-workspace-actions, - & .zen-workspace-actions[active="true"] { - display: flex; - } -} - -#PanelUI-zen-workspaces-current-info toolbarbutton:first-child { - margin-bottom: 10px; - margin-top: 5px; -} - -#PanelUI-zen-workspaces-view vbox:nth-child(2) { - margin-top: 10px; -} - -#PanelUI-zen-workspaces-new { - margin-left: auto; - min-height: 1px !important; - padding: 3px; - border-radius: 4px; - width: 20px; - height: 20px; -} - -#PanelUI-zen-workspaces-create-footer { - padding-bottom: 0 !important; - margin-top: 20px; - margin-left: 0; - margin-bottom: 0 !important; - width: 100%; -} - -#PanelUI-zen-workspaces-create-footer button[default="true"] { - width: 100%; -} diff --git a/src/browser/themes/shared/zen-sources.inc.mn b/src/browser/themes/shared/zen-sources.inc.mn index 70fceb57a..a657cc82b 100644 --- a/src/browser/themes/shared/zen-sources.inc.mn +++ b/src/browser/themes/shared/zen-sources.inc.mn @@ -1,8 +1,3 @@ - skin/classic/browser/zen-browser-shared.css (../shared/zen-browser-shared.css) - skin/classic/browser/zen-sidebar.css (../shared/zen-sidebar.css) - skin/classic/browser/zen-panel-ui.css (../shared/zen-panel-ui.css) - skin/classic/browser/zen-sidebar-panels.css (../shared/zen-sidebar-panels.css) skin/classic/browser/preferences/zen-preferences.css (../shared/preferences/zen-preferences.css) - skin/classic/browser/zen-decks.css (../shared/zen-decks.css) #include zen-icons/jar.inc.mn \ No newline at end of file diff --git a/src/toolkit/content/jar-mn.patch b/src/toolkit/content/jar-mn.patch deleted file mode 100644 index 6faef7f7d..000000000 --- a/src/toolkit/content/jar-mn.patch +++ /dev/null @@ -1,12 +0,0 @@ -diff --git a/toolkit/content/jar.mn b/toolkit/content/jar.mn -index 8b18c945253d00603891cc5f0b989476318e219c..c5368eec8d9a760c19a827fe7a4b9afb4b702976 100644 ---- a/toolkit/content/jar.mn -+++ b/toolkit/content/jar.mn -@@ -143,3 +143,7 @@ toolkit.jar: - # Third party files - content/global/third_party/d3/d3.js (/third_party/js/d3/d3.js) - content/global/third_party/cfworker/json-schema.js (/third_party/js/cfworker/json-schema.js) -+ -+# Zen modules -+ content/global/zen-xul.css -+ content/global/zen-fullscreen-override.css diff --git a/src/toolkit/content/xul-css.patch b/src/toolkit/content/xul-css.patch index 3522c33cb..fb5fd2e4a 100644 --- a/src/toolkit/content/xul-css.patch +++ b/src/toolkit/content/xul-css.patch @@ -1,17 +1,8 @@ diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css -index 908132d598083dd43ee62940f4bac84e49238c92..eb7edf3870032fe796b3fa676de96e1dbb5eea85 100644 +index 26c11188d3edcc9806fab7144aa0e22540a32a57..df3dbca06ede3eda1854febe314c38779f754c03 100644 --- a/toolkit/content/xul.css +++ b/toolkit/content/xul.css -@@ -12,6 +12,8 @@ - * browser.css. - */ - -+@import url("chrome://global/content/zen-xul.css"); -+ - @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ - @namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */ - -@@ -485,7 +487,8 @@ deck > *|*:not(:-moz-native-anonymous) { +@@ -485,7 +485,8 @@ deck > *|*:not(:-moz-native-anonymous) { } tabpanels > .deck-selected, diff --git a/src/toolkit/content/zen-fullscreen-override.css b/src/toolkit/content/zen-fullscreen-override.css deleted file mode 100644 index 4df122060..000000000 --- a/src/toolkit/content/zen-fullscreen-override.css +++ /dev/null @@ -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/. - */ - -[inDOMFullscreen="true"] #nav-bar, -[inDOMFullscreen="true"] #zen-sidebar-web-panel { - display: none !important; -} - -[inDOMFullscreen="true"] #appcontent { - margin: 0 !important; - border-radius: 0 !important; -} - diff --git a/src/toolkit/content/zen-xul.css b/src/toolkit/content/zen-xul.css deleted file mode 100644 index bfa458e0b..000000000 --- a/src/toolkit/content/zen-xul.css +++ /dev/null @@ -1,85 +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("zen-fullscreen-override.css"); - -:root { - --zen-main-browser-background: light-dark(white, #1b1b1b); - --zen-appcontent-border: 1px solid var(--zen-colors-border); - --zen-browser-border-radius: var(--zen-panel-radius); -} - -toolbox#navigator-toolbox, -#browser { - background: transparent !important; -} - -#browser { - width: 100%; -} - -html#main-window > body { - background: var(--zen-main-browser-background) !important; -} - -:not([inDOMFullscreen="true"]) #appcontent { - overflow: hidden; -} - -#appcontent { - background: var(--toolbar-bgcolor); -} - -:not([inDOMFullscreen="true"]) #appcontent, -#sidebar-box { - /** Sidebar is already hidden in full screen mode */ - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; - border: none; -} - - -panel[type="arrow"][animate][animate="open"] { - animation: zen-jello-animation 0.2s ease-in-out; -} - -panel[type="arrow"][animate][animate="cancel"] { - animation: zen-jello-out-animation 0.2s ease-in-out; -} - -@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-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; - } -} \ No newline at end of file diff --git a/src/toolkit/themes/shared/desktop-jar-inc-mn.patch b/src/toolkit/themes/shared/desktop-jar-inc-mn.patch deleted file mode 100644 index 378dd39c4..000000000 --- a/src/toolkit/themes/shared/desktop-jar-inc-mn.patch +++ /dev/null @@ -1,11 +0,0 @@ -diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn -index 5907a9773fe608520b0088c1fc40c23a7003530f..535a7fae17f295a3bc97cf807d9c9dd496ec2352 100644 ---- a/toolkit/themes/shared/desktop-jar.inc.mn -+++ b/toolkit/themes/shared/desktop-jar.inc.mn -@@ -162,3 +162,5 @@ - skin/classic/global/reader/content-width-20.svg (../../shared/reader/content-width-20.svg) - skin/classic/global/tree/sort-asc.svg (../../shared/tree/sort-asc.svg) - skin/classic/global/tree/sort-dsc.svg (../../shared/tree/sort-dsc.svg) -+ -+#include zen-desktop.jar.inc.mn -\ No newline at end of file diff --git a/src/toolkit/themes/shared/in-content/common-shared-css.patch b/src/toolkit/themes/shared/in-content/common-shared-css.patch index d9dba00ca..5223135bd 100644 --- a/src/toolkit/themes/shared/in-content/common-shared-css.patch +++ b/src/toolkit/themes/shared/in-content/common-shared-css.patch @@ -1,12 +1,12 @@ diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css -index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..92705331fa12d88e9091310c1f527562931e7132 100644 +index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815abfe67087 100644 --- a/toolkit/themes/shared/in-content/common-shared.css +++ b/toolkit/themes/shared/in-content/common-shared.css @@ -5,6 +5,8 @@ @import url("chrome://global/skin/design-system/tokens-brand.css"); @import url("chrome://global/skin/design-system/text-and-typography.css"); -+@import url("chrome://global/skin/in-content/zen-common-shared.css"); ++@import url("chrome://browser/content/zen-styles/zen-theme.css"); + @namespace html "http://www.w3.org/1999/xhtml"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; diff --git a/src/toolkit/themes/shared/popup-css.patch b/src/toolkit/themes/shared/popup-css.patch index 3c94d3ea8..3cbef549e 100644 --- a/src/toolkit/themes/shared/popup-css.patch +++ b/src/toolkit/themes/shared/popup-css.patch @@ -1,39 +1,8 @@ diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css -index ed230860215c734e6fb903b3660d0c679043e3f3..348436a56cecdf101da66cdec9d64f1bb851ba4d 100644 +index ed230860215c734e6fb903b3660d0c679043e3f3..1e54e023c930db04a532b2b125f44e73912f63ad 100644 --- a/toolkit/themes/shared/popup.css +++ b/toolkit/themes/shared/popup.css -@@ -2,6 +2,8 @@ - * 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("zen-popup.css"); -+ - @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - - /* ::::: menupopup ::::: */ -@@ -13,16 +15,16 @@ panel { - color-scheme: light dark; - - min-width: 1px; -- --panel-background: Menu; -+ --panel-background: var(--arrowpanel-background); - --panel-color: MenuText; - --panel-padding-block: 4px; -- --panel-padding: var(--panel-padding-block) 0; -- --panel-border-radius: 4px; -- --panel-border-color: ThreeDShadow; -+ --panel-padding: var(--panel-padding-block) 0 5px 0; -+ --panel-border-radius: 10px; -+ --panel-border-color: transparent /* var(--arrowpanel-border-color) */ !important; - --panel-width: initial; - - --panel-shadow-margin: 0px; -- --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2); -+ --panel-shadow: rgba(0, 0, 0, 0.05) 0px 4px 10px; - -moz-window-input-region-margin: var(--panel-shadow-margin); - margin: calc(-1 * var(--panel-shadow-margin)); - -@@ -30,8 +32,6 @@ panel { +@@ -30,8 +30,6 @@ panel { --background-color-canvas: var(--panel-background); @media (-moz-platform: linux) { @@ -42,7 +11,7 @@ index ed230860215c734e6fb903b3660d0c679043e3f3..348436a56cecdf101da66cdec9d64f1b @media (prefers-contrast) { --panel-border-color: color-mix(in srgb, currentColor 60%, transparent); -@@ -43,18 +43,7 @@ panel { +@@ -43,18 +41,7 @@ panel { --panel-shadow-margin: 4px; } @@ -62,7 +31,7 @@ index ed230860215c734e6fb903b3660d0c679043e3f3..348436a56cecdf101da66cdec9d64f1b &::part(content) { display: flex; -@@ -193,6 +182,6 @@ panel[type="arrow"] { +@@ -193,6 +180,6 @@ panel[type="arrow"] { } &[animating] { diff --git a/src/toolkit/themes/shared/zen-desktop.jar.inc.mn b/src/toolkit/themes/shared/zen-desktop.jar.inc.mn deleted file mode 100644 index 383fa0ae4..000000000 --- a/src/toolkit/themes/shared/zen-desktop.jar.inc.mn +++ /dev/null @@ -1,5 +0,0 @@ - skin/classic/global/in-content/zen-common-shared.css (../../shared/in-content/zen-common-shared.css) - skin/classic/global/zen-global-shared.css (../../shared/zen-global-shared.css) - skin/classic/global/zen-popup.css (../../shared/zen-popup.css) - skin/classic/global/in-content/zen-common-shared-ui-override.css (../../shared/in-content/zen-common-shared-ui-override.css) - \ No newline at end of file diff --git a/src/toolkit/themes/shared/zen-global-shared.css b/src/toolkit/themes/shared/zen-global-shared.css deleted file mode 100644 index 94978bf8b..000000000 --- a/src/toolkit/themes/shared/zen-global-shared.css +++ /dev/null @@ -1,26 +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("./in-content/zen-common-shared.css"); - -:root { - --zen-panel-radius: 9px; - - --arrowpanel-background: var(--zen-dialog-background) !important; - --arrowpanel-border-color: var(--zen-dialog-border-color) !important; - --arrowpanel-border-radius: var(--zen-panel-radius) !important; - - &:-moz-lwtheme { - color: var(--lwt-text-color); - --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); - } -} - -@media (prefers-color-scheme: dark) { - :root { - --zen-dialog-border-color: rgba(255,255,255,.1); - } -}