mirror of
https://github.com/zen-browser/desktop.git
synced 2026-01-06 21:37:50 +00:00
mauro 🤙
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
106
src/browser/base/content/ZenStartup.mjs
Normal file
106
src/browser/base/content/ZenStartup.mjs
Normal file
@@ -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(`
|
||||
<html:div id="zen-watermark">
|
||||
<image src="chrome://branding/content/about-logo.png" />
|
||||
</html:div>
|
||||
`);
|
||||
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();
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 });
|
||||
</script>
|
||||
+#include zen-locales.inc.xhtml
|
||||
+#include zen-scripts.inc.xhtml
|
||||
+#include zen-assets.inc.xhtml
|
||||
</head>
|
||||
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
# All sets except for popupsets (commands, keys, and stringbundles)
|
||||
@@ -160,9 +162,12 @@
|
||||
@@ -159,9 +161,12 @@
|
||||
</vbox>
|
||||
</html:template>
|
||||
|
||||
@@ -27,10 +27,3 @@ index 3063370347db9e2812ad30205e585c849e44c91e..be74d9e624b8220cb9bd009bae31fb51
|
||||
|
||||
<html:template id="customizationPanel">
|
||||
<box id="customization-container" flex="1" hidden="true"><![CDATA[
|
||||
@@ -176,5 +181,6 @@
|
||||
|
||||
<!-- Put it at the very end to make sure it's not covered by anything. -->
|
||||
<html:div id="fullscr-toggler" hidden="hidden"/>
|
||||
+#include zen-watermark.inc.xhtml
|
||||
</html:body>
|
||||
</html>
|
||||
|
||||
36
src/browser/base/content/zen-assets.inc.xhtml
Normal file
36
src/browser/base/content/zen-assets.inc.xhtml
Normal file
@@ -0,0 +1,36 @@
|
||||
<!-- Styles used all over the browser -->
|
||||
<linkset>
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-theme.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-animations.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-buttons.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-toolbar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-ui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-panel-ui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-single-components.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-container.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-urlbar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-floating-urlbar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-workspaces.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-profile-dialog.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
|
||||
|
||||
</linkset>
|
||||
|
||||
<!-- Scripts used all over the browser -->
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("DOMContentLoaded", async () => {
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenSidebarManager.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenProfileDialogUI.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs");
|
||||
}, { once: true });
|
||||
</script>
|
||||
37
src/browser/base/content/zen-assets.jar.inc.mn
Normal file
37
src/browser/base/content/zen-assets.jar.inc.mn
Normal file
@@ -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)
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("DOMContentLoaded", async () => {
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenSidebarManager.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenProfileDialogUI.mjs");
|
||||
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs");
|
||||
}, { once: true });
|
||||
</script>
|
||||
@@ -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)
|
||||
|
||||
109
src/browser/base/content/zen-styles/zen-animations.css
Normal file
109
src/browser/base/content/zen-styles/zen-animations.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
35
src/browser/base/content/zen-styles/zen-browser-ui.css
Normal file
35
src/browser/base/content/zen-styles/zen-browser-ui.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
151
src/browser/base/content/zen-styles/zen-compact-mode.css
Normal file
151
src/browser/base/content/zen-styles/zen-compact-mode.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
120
src/browser/base/content/zen-styles/zen-decks.css
Normal file
120
src/browser/base/content/zen-styles/zen-decks.css
Normal file
@@ -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;
|
||||
}
|
||||
45
src/browser/base/content/zen-styles/zen-floating-urlbar.css
Normal file
45
src/browser/base/content/zen-styles/zen-floating-urlbar.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/browser/base/content/zen-styles/zen-panel-ui.css
Normal file
8
src/browser/base/content/zen-styles/zen-panel-ui.css
Normal file
@@ -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;
|
||||
}
|
||||
60
src/browser/base/content/zen-styles/zen-panels/bookmarks.css
Normal file
60
src/browser/base/content/zen-styles/zen-panels/bookmarks.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/browser/base/content/zen-styles/zen-panels/print.css
Normal file
7
src/browser/base/content/zen-styles/zen-panels/print.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.printDialogBox {
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.printSettingsBrowser {
|
||||
min-width: 350px;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
169
src/browser/base/content/zen-styles/zen-profile-dialog.css
Normal file
169
src/browser/base/content/zen-styles/zen-profile-dialog.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
4
src/browser/base/content/zen-styles/zen-tabs.css
Normal file
4
src/browser/base/content/zen-styles/zen-tabs.css
Normal file
@@ -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");
|
||||
383
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
Normal file
383
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
8
src/browser/base/content/zen-styles/zen-toolbar.css
Normal file
8
src/browser/base/content/zen-styles/zen-toolbar.css
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
#nav-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:root[inDOMFullscreen="true"] #zen-appcontent-navbar-container {
|
||||
display: none;
|
||||
}
|
||||
151
src/browser/base/content/zen-styles/zen-urlbar.css
Normal file
151
src/browser/base/content/zen-styles/zen-urlbar.css
Normal file
@@ -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
|
||||
}
|
||||
184
src/browser/base/content/zen-styles/zen-workspaces.css
Normal file
184
src/browser/base/content/zen-styles/zen-workspaces.css
Normal file
@@ -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%;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
<html:div id="zen-watermark">
|
||||
<image src="chrome://branding/content/about-logo.png" />
|
||||
</html:div>
|
||||
@@ -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")
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -49,7 +49,8 @@ groupbox:has(+ .subcategory) {
|
||||
}
|
||||
|
||||
.navigation {
|
||||
padding: 50px;
|
||||
padding: 4%;
|
||||
background: var(--zen-colors-tertiary);
|
||||
}
|
||||
|
||||
groupbox button {
|
||||
|
||||
@@ -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 {
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
@@ -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";
|
||||
|
||||
@@ -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] {
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user