From 8cdc29f1e82b2748325f3b3d4689389b99c3c723 Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Tue, 13 Aug 2024 16:39:46 +0200 Subject: [PATCH 01/14] Remove unused CSS files related to Zen theme --- .../themes/shared/zen-browser-shared.css | 1032 ----------------- src/browser/themes/shared/zen-decks.css | 51 - src/browser/themes/shared/zen-panel-ui.css | 395 ------- .../themes/shared/zen-sidebar-panels.css | 278 ----- src/browser/themes/shared/zen-sidebar.css | 211 ---- .../content/zen-fullscreen-override.css | 16 - src/toolkit/content/zen-xul.css | 85 -- .../zen-common-shared-ui-override.css | 33 - .../shared/in-content/zen-common-shared.css | 124 -- .../themes/shared/zen-global-shared.css | 26 - src/toolkit/themes/shared/zen-popup.css | 445 ------- 11 files changed, 2696 deletions(-) delete mode 100644 src/browser/themes/shared/zen-browser-shared.css delete mode 100644 src/browser/themes/shared/zen-decks.css delete mode 100644 src/browser/themes/shared/zen-panel-ui.css delete mode 100644 src/browser/themes/shared/zen-sidebar-panels.css delete mode 100644 src/browser/themes/shared/zen-sidebar.css delete mode 100644 src/toolkit/content/zen-fullscreen-override.css delete mode 100644 src/toolkit/content/zen-xul.css delete mode 100644 src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css delete mode 100644 src/toolkit/themes/shared/in-content/zen-common-shared.css delete mode 100644 src/toolkit/themes/shared/zen-global-shared.css delete mode 100644 src/toolkit/themes/shared/zen-popup.css diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css deleted file mode 100644 index 78ba037f0..000000000 --- a/src/browser/themes/shared/zen-browser-shared.css +++ /dev/null @@ -1,1032 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -@import url("zen-panel-ui.css"); -@import url("zen-icons/icons.css"); -@import url("zen-decks.css"); - -:root { - --toolbarbutton-border-radius: 6px !important; - - --fp-contextmenu-border-radius: 8px; - --fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0; - --fp-contextmenu-menuitem-border-radius: calc(4px + var(--fp-contextmenu-menuitem-border-width)); - --fp-contextmenu-menuitem-padding-block: 6px; - --fp-contextmenu-menuitem-padding-inline: 10px; - --fp-contextmenu-menuitem-border-width: 2px; - --fp-contextmenu-menuicon-margin-inline: 12px; - --fp-contextmenu-menuitem-margin-inline: calc(4px - var(--fp-contextmenu-menuitem-border-width)); - --fp-contextmenu-menuitem-margin-block: 0px; - --fp-contextmenu-menuitem-margin: var(--fp-contextmenu-menuitem-margin-block) var(--fp-contextmenu-menuitem-margin-inline); - --fp-contextmenu-separator-vertical: calc(4px - var(--fp-contextmenu-menuitem-border-width)); - --fp-contextmenu-separator-horizontal: 0; - --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95)); - --toolbar-bgcolor: transparent !important; - - --input-bgcolor: var(--zen-colors-tertiary) !important; - --input-border-color: var(--zen-input-border-color) !important; - --zen-themed-toolbar-bg: var(--zen-colors-tertiary); - - --toolbar-field-background-color: var(--zen-colors-input-bg) !important; -} - -@media not (-moz-bool-pref: "zen.theme.toolbar-themed") { - :root { - --toolbar-bgcolor: light-dark(white, #1b1b1b) !important; - --zen-themed-toolbar-bg: var(--toolbar-bgcolor); - } -} - -#PersonalToolbar:not([collapsed="true"]) { - /*border-top: 1px solid light-dark(#ddd, #4a4a4a);*/ - padding: 5px 0; - padding-inline: 15px !important; -} - -/* URL and tool bars */ - -#urlbar { - --toolbarbutton-border-radius: 999px; - border: transparent; - overflow: hidden; - padding: 1px; - border-radius: var(--toolbarbutton-border-radius); -} - -#urlbar[focused="true"][breakout-extend="true"] { - overflow: visible; -} - -#urlbar { - border: 1px solid light-dark(rgba(0,0,0,.2), rgba(255,255,255,.2)) -} - -#searchbar:focus-within { - border-color: transparent !important; -} - -#urlbar[focused="true"] { - box-shadow: var(--panel-shadow) !important; -} - -#urlbar[focused="true"] > #urlbar-background { - background: var(--zen-dialog-background) !important; -} - -#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, -#searchbar:focus-within { - outline: none !important; - outline-offset: none !important; - outline-color: none !important; -} - -#urlbar .urlbar-page-action, -#urlbar #tracking-protection-icon-container, -#urlbar:not([extend="true"]) #identity-box:not(.chromeUI) #identity-icon-box { - border-radius: 999px; -} - -#urlbar[breakout-extend="true"] { - --toolbarbutton-border-radius: 6px; -} - -/*#urlbar:not([breakout-extend="true"]) #urlbar-input { - text-align: center; - transition: .2s; -}*/ - -#identity-icon-label { - padding-inline-start: 8px !important; -} - -#urlbar #identity-box.chromeUI #identity-icon-box { - border-radius: 5px !important; -} - -#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI #identity-icon-box { - border-radius: 20px 10px 10px 20px !important; -} - -#urlbar .urlbar-page-action, -#urlbar #identity-box #identity-icon-box, -#urlbar #tracking-protection-icon-container { - margin: 0 1px; -} - -#urlbar:not([extend="true"]) #identity-box #identity-icon-box { position: relative;} - -/* TODO: this does NOT show up! */ -/* #urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) #identity-icon-box::after { - content: ''; - position: absolute; - top: 50%; - right: -5px; - height: calc(100% - 5px); - width: 1px; - background: var(--zen-dialog-border-color); - transition: .1s; - transform: translateY(-50%); -} */ - -#urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) #identity-icon-box { - margin-right: 5px; -} - -#urlbar:not([extend="true"]) #identity-box:not(.chromeUI):not(.localResource) { - margin-inline-end: 0 !important; -} - -.urlbar-page-action { - width: calc(var(--urlbar-min-height) - 5px - 2 * var(--urlbar-container-padding)) !important; - height: calc(var(--urlbar-min-height) - 5px - 2 * var(--urlbar-container-padding)) !important; - padding: 0 !important; - justify-content: center !important; - align-items: center !important; -} - -toolbar .toolbarbutton-1:not(.unified-extensions-item-action-button) { - & > .toolbarbutton-icon, - & > .toolbarbutton-badge-stack { - width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; - height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; - } -} - -toolbar .zen-sidebar-panel-button { - & > .toolbarbutton-icon, - & > .toolbarbutton-badge-stack { - width: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important; - height: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important; - } -} - -#identity-permission-box { - margin: 0 5px 0 0 !important; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; -} - -#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])) #identity-icon-box { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - margin-right: 0 !important; -} - -#tracking-protection-icon-container, -#page-action-buttons { - order: 2 !important; -} - -#notification-popup-box { - border-radius: 999px; - margin-right: 5px; - transition: .2s; - height: 100%; - padding: 7px; -} - -button.popup-notification-dropmarker { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; -} - -.panel-footer:has(button.popup-notification-dropmarker:not([hidden="true"])) button.popup-notification-secondary-button { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -.searchbar-engine-one-off-item { - max-width: 20px; - min-width: 20px !important; - justify-content: center; -} - -#downloadsHistory { - margin-top: 5px -} - -/* Toolbars customization */ - -#titlebar { - height: 100%; -} - -#navigator-toolbox { - min-width: 55px; - - margin-top: 0 !important; /* Issue #156 */ -} - -:root[inFullscreen="true"] #navigator-toolbox { - display: none; -} - -#zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox { - transition: .3s !important; -} - -#navigator-toolbox toolbar#TabsToolbar { - margin: var(--zen-appcontent-separator-from-window); - overflow: hidden; - transition: .2s; - flex-direction: column !important; - padding: 5px 0; - margin-right: 0 !important; - -moz-window-dragging: no-drag; - - --zen-sidebar-action-button-width: 38px; - padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */ -} - -#TabsToolbar-customization-target { - flex-direction: column; -} - -:root[customizing] .customization-target:not(#widget-overflow-fixed-list) { - min-width: 0 !important; -} - -toolbarpaletteitem { - justify-content: center !important; -} - -toolbarbutton#scrollbutton-down, -toolbarbutton#scrollbutton-up { - display: none !important; -} - -#toolbar-menubar { - display: none; -} - -.tab-label-container { - display: none; -} - -.tab-icon-stack > .tab-icon-image, -.tab-icon-stack > .tab-throbber { - width: var(--zen-browser-tab-icon-size); - height: var(--zen-browser-tab-icon-size); - margin-inline-end: 0 !important; -} - -.tab-icon-stack .tab-icon-image { - transform: scale(0.5); - opacity: 0; - animation: zen-zoom-in 0.12s ease-in-out 0.3s forwards; -} - -@keyframes zen-zoom-in { - from { - transform: scale(0.5); - opacity: 0; - } - to { - opacity: 1; - transform: scale(1); - } -} - -.tab-background { - display: none; -} - -.tabbrowser-tab { - --zen-browser-tab-icon-size: 18px; - --tab-min-width: 36px !important; - margin: 0 auto !important; - border-radius: 8px; - position: relative; - color-scheme: var(--tab-selected-color-scheme); - border: 2px solid transparent; - background: transparent; - padding: 0 !important; - align-items: center; - min-height: var(--tab-min-width); /* Make a box */ - animation: zen-slide-in 0.3s; - width: calc(var(--zen-browser-tab-icon-size) + 2px); - transition: .1s background, .1s border-color; - min-width: var(--tab-min-width); - - display: flex !important; - justify-content: center; - align-items: center; -} - -@media (-moz-bool-pref: "zen.tabs.dim-pending") { - .tabbrowser-tab[pending]:not(:hover) { - opacity: 0.5; - } -} - -.tabbrowser-tab[hidden="true"] { - display: none !important; -} - -.tabbrowser-tab:hover { - background: var(--toolbarbutton-hover-background); -} - -.tabbrowser-tab:active, -.zen-sidebar-panel-button:active { - transform: scale(0.9) !important; -} - -.tab-stack { - width: 30px !important; - height: 30px !important; - min-width: 30px !important; - min-height: 30px !important; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} - -@keyframes zen-slide-in { - from { - transform: translateX(-10px); - opacity: 0; - } - to { - transform: translateX(0); - opacity: 1; - } -} - -.tabbrowser-tab:not([fadein]) { - display: none !important; -} - -.tabbrowser-tab:is([multiselected="true"], [selected]) { - background: var(--toolbarbutton-hover-background); -} - -#private-browsing-indicator-with-label { - display: none !important; -} - -.tabbrowser-tab::after {/* Containers */ - background: var(--identity-tab-color, transparent); - border-radius: 2px; - height: 80%; - width: 2px; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: -2px; - content: ''; - pointer-events: none; -} - -.tabbrowser-tab { - margin-inline-start: 0 !important; - margin: 0 auto !important; -} - -.tabbrowser-tab[pinned] { - position: relative !important; - display: flex !important; -} - -#tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of [fadein]:not([pinned]):not([hidden])) { - margin-top: 15px !important; - position: relative; - overflow: visible; - - & .tab-stack::before { - content: ''; - position: absolute; - top: -11px; - left: 0; - width: 100%; - height: 1.5px; - border-radius: 1px; - background: var(--zen-colors-border); - } -} - -.tab-close-button { - position: absolute; - display: none; - left: 0; - top: 50%; -} - -.tabbrowser-tab[open="true"]:hover .tab-close-button { - /* TODO: fix this */ - /*display: block;*/ -} - -.tab-content { - padding: 0 !important; - width: fit-content; -} - -.toolbar-items > toolbartabstop:first-child { - display: none; -} - -#nav-bar > *:not(.titlebar-buttonbox-container) { - padding-top: 5px; - padding-bottom: 5px; -} - -#TabsToolbar-customization-target { - height: 100%; -} - -#tabbrowser-tabs { - margin-inline-start: 0 !important; - padding-inline-start: 0 !important; - border: none !important; - /*background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));*/ - margin: 0 !important; - border: none; - height: 100%; -} - -#tabbrowser-arrowscrollbox { - margin: 3px 0 !important; -} - -#alltabs-button stack { - transform: rotate(-90deg); -} - -.tab-icon-overlay { - margin-inline-end: 0 !important; - display: none !important; /* TODO: fix this */ -} - -/*#tabbrowser-arrowscrollbox { - &::part(scrollbox-clip) { - max-height: 405px; - } -}*/ - -#zen-tabbox-wrapper { - position: relative; -} - -.footer-button { - padding: var(--zen-button-padding) !important; - border-radius: var(--zen-button-border-radius) !important; -} - -.footer-button:not([default], .primary) { - color: var(--zen-secondary-btn-color) !important; -} - -.footer-button:is([default], .primary) { - --focus-outline-color: var(--zen-primary-btn-color) !important; -} - -/** Specific dialogs override */ - -#identity-popup-multiView toolbarseparator, -#editBookmarkHeaderSeparator { - display: none; -} - -#identity-popup-more-info-footer toolbarseparator { - display: block; -} - -#editBMPanel_foldersExpander { - display: none; -} - -#editBookmarkPanelContent > label:not(.editBMPanel_nameRow) { - padding-top: 5px; -} - -panelmultiview { - display: flex; - flex-direction: column; - align-items: center; -} - -/** No space in panels overrides */ - -#tabbrowser-tabbox { - background: var(--toolbar-bgcolor); - display: flex; - flex-direction: row; -} - -:root:not([inDOMFullscreen="true"]) #tabbrowser-tabpanels { - background: transparent !important; - margin-right: 0; -} - -:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - border-radius: var(--zen-browser-border-radius); - border: var(--zen-appcontent-border); - width: -moz-available; - margin: 0 10px 10px 0; -} - -:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer { - margin: 0 7px 7px 0; -} - -#tabbrowser-tabbox #tabbrowser-tabpanels .browserStack > browser { - border-radius: var(--zen-browser-border-radius); - clip-path: inset(0px 0px 0px round var(--zen-browser-border-radius) 0) !important; -} - -#urlbar[breakout]:not([breakout-extend="true"]) { - top: unset; -} - -#zen-main-app-wrapper { - background: var(--zen-main-browser-background); -} - -@media not (-moz-bool-pref: "zen.view.compact") { - #sidebar-box { - margin-top: 0 !important; - } -} - -@media (-moz-bool-pref: "zen.view.compact") { - :root[sizemode="fullscreen"], - #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; } - - #navigator-toolbox { - --zen-compact-toolbox-margin-single: 15px; - --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single); - position: absolute !important; - display: block; - transition: 50ms ease-in !important; - transform: translateX(calc(-100% + var(--zen-compact-toolbox-margin-single) + 2px)) !important; - opacity: 0; - line-height: 0; - z-index: 1; - height: 100%; - margin: 0; - padding: var(--zen-compact-toolbox-margin) !important; - - & #titlebar { - border: 1px solid var(--zen-colors-border); - background: var(--zen-colors-tertiary) !important; - padding: 0 5px; - border-radius: 11px; - } - } - - @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - width: fit-content !important; - } - } - - @media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important; - } - } - - #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])), - #sidebar-box:not([positionend="true"]) { - margin-right: 0 !important; - margin-left: 10px !important; - } - - #sidebar-box[positionend="true"] { - margin-left: 0 !important; - margin-right: 10px !important; - } - - #sidebar-splitter { - margin: 0 !important; - } - - @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") { - #navigator-toolbox { - /* Remove the top margin */ - --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 3) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single); - } - - #zen-sidebar-web-panel-wrapper, - #sidebar-box { - margin-top: 0 !important; - } - } - - #navigator-toolbox:hover, - #navigator-toolbox:focus-within, - #navigator-toolbox[zen-user-show], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) { - transition-delay: 33ms !important; - transform: none !important; - opacity: 1; - } - - #navigator-toolbox > *{ line-height: normal; pointer-events: auto } - - #navigator-toolbox, - #navigator-toolbox > *{ - -moz-appearance: none !important; - } - - #zen-sidebar-splitter { - display: none !important; - } - - /* Don't apply transform before window has been fully created */ - :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important } - - :root[customizing] #navigator-toolbox{ - position: relative !important; - transform: none !important; - opacity: 1 !important; - } - - #navigator-toolbox[inFullscreen] > #PersonalToolbar, - #PersonalToolbar[collapsed="true"]{ display: none } - - :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - margin-left: 10px !important; - margin-right: 10px !important; - } - - @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") { - #zen-appcontent-navbar-container { - --urlbar-height: unset; - transition: .2s ease-in-out; - transform: translateY(calc(-100% + 5px)); - opacity: 0; - position: absolute; - width: 100%; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - border-bottom: 1px solid var(--zen-colors-border); - top: 0; - background: var(--zen-colors-tertiary); - z-index: 2; - transition: .2s ease-in-out; - } - - #zen-appcontent-navbar-container:hover, - #zen-appcontent-navbar-container:focus-within, - #zen-appcontent-navbar-container[zen-user-show], - #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container, - #zen-appcontent-navbar-container:has(*[open="true"]) { - transform: translateY(0); - opacity: 1; - } - - :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { - margin-top: 10px !important; - } - - #titlebar { - padding-top: 5px !important; - } - - #zen-sidebar-web-panel-wrapper { - margin-top: 10px !important; - } - } -} - -:root:is([chromehidden~="location"],[chromehidden~="toolbar"]) { - --zen-browser-border-radius: 0 !important; - - & #navigator-toolbox { - display: none; - } - - & #tabbrowser-tabpanels { - margin: 0 !important; - - & .browserSidebarContainer { - margin: 0 !important; - } - } - - & #zen-sidebar-splitter { - display: none !important; - } -} - -/* Screenshots */ - -#screenshotsPagePanel { - position: absolute !important; - top: 3%; - right: 1.5%; -} - -/* Watermark */ - -#zen-watermark { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--zen-main-browser-background); - display: flex; - justify-content: center; - align-items: center; - z-index: 9999; -} - -#zen-watermark image { - opacity: .2; - filter: grayscale(100%); - width: 200px; - height: 200px; -} - -#zen-watermark[hidden="true"] { - transition: 0.6s; - transition-delay: .5s; - opacity: 0; - pointer-events: none; -} - -#zen-workspaces-button .zen-workspace-sidebar-name { - margin-left: 10px; - display: none; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -@media not (-moz-bool-pref: "zen.watermark.enabled") { - #zen-watermark { - display: none; - } -} - -/* Expanded sidebar */ -#zen-sidebar-splitter { - display: none; - opacity: 0; -} - -@media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #zen-workspaces-button .zen-workspace-sidebar-name { - display: block; - } - - #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] { - display: none; - } - - #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name { - margin-left: 0; - } - - #navigator-toolbox { - --zen-navigation-toolbar-min-width: 160px; - min-width: var(--zen-navigation-toolbar-min-width); - align-items: start; - padding-left: 10px; - padding-right: 5px; - transition: .2s; - width: 170px; - border: none; - } - - :root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter { - display: block; - width: 1px; - } - - .tab-label-container { - display: block; - } - - #titlebar, - #TabsToolbar, - #TabsToolbar .toolbar-items { - width: 100%; - align-items: flex-start; - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) { - width: 100% !important; - border-radius: 8px; - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover { - background: var(--button-hover-bgcolor); - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text, - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon, - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack { - background: transparent !important; - } - - #tabbrowser-arrowscrollbox-periphery { - margin-top: 5px; - } - - #tabbrowser-arrowscrollbox-periphery > toolbarbutton { - display: flex; - justify-content: center; - align-items: center; - } - - .tabbrowser-tab { - max-width: unset !important; - - &:not([pinned]) { - width: 100%; - - &:hover .tab-close-button { - display: block !important; - } - - & .tab-content { - position: relative; - width: 100%; - } - - & .tab-stack { - justify-content: start; - padding: 10px; - width: 100% !important; - } - - & .tab-label-container { - - #tabbrowser-tabs:not([secondarytext-unsupported]) & { - display: flex; - align-items: center; - padding-left: 10px; - } - } - } - - &:active, - .zen-sidebar-panel-button:active { - transform: scale(0.96) !important; - } - - &[pinned] { - margin: 0 !important; - } - } - #tabbrowser-arrowscrollbox::part(scrollbox) { - /* We have the pinned tabs on the top, next to each other, - * and the rest of the tabs are below them. */ - display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr)); - padding: 5px; - } - - .tabbrowser-tab:not([pinned]), - #tabbrowser-arrowscrollbox-periphery { - grid-column: 1 / -1; - } - - .tabbrowser-tab[pinned] { - grid-column: span 1; - min-width: 100%; - } - - #zen-workspaces-button { - overflow: hidden; - width: calc(100% - 40px) !important; - white-space: nowrap; - text-overflow: ellipsis; - display: flex; - padding: 2px 10px; - } - - #zen-sidebar-icons-wrapper { - width: 100%; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); - transition: .1s; - } - - #zen-sidebar-icons-wrapper::before { - width: 100%; - } -} - -/* Popup Search */ - -@media (-moz-bool-pref: "zen.theme.floating-urlbar") { - #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) { - #urlbar-input { - font-size: 16px !important; - } - - z-index: 2; - position: fixed !important; - bottom: auto !important; - top: 20vh !important; - padding-left: 6px !important; - padding-right: 8px !important; - - left: 18vw !important; - right: 18vw !important; - width: 64vw !important; - - &:after { - content: ""; - position: fixed; - pointer-events: none; - - width: 100vw; - height: 100vh; - - top: 0px; - left: 0px; - - background-color: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(5px); - - z-index: -1; - } - - #identity-box { - margin: auto 0; - height: 30px; - margin-right: 10px; - } - - .urlbar-go-button { - margin: auto 0; - } - } -} - -/** - * - * ZEN OVERRIDES - */ - -.content-prompt-dialog > .dialogOverlay { - align-content: start; -} - -.dialogBox:not(.spotlightBox) { - border: 1px solid var(--zen-dialog-border-color); -} - -#window-modal-dialog:not([zen-dialog-welcome-element="true"]) .dialogBox:not(.spotlightBox) { - transform: translateY(-9px); -} - -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox:not(.spotlightBox) { - margin: 0 !important; -} - -#window-modal-dialog[zen-dialog-welcome-element="true"], -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogOverlay, -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogFrame, -#window-modal-dialog[zen-dialog-welcome-element="true"] .dialogBox { - width: 100% !important; - height: 100% !important; - max-height: none !important; - max-width: none !important; -} - -#window-modal-dialog[zen-dialog-welcome-element="true"] { - --zen-welcome-dialog-space: 7px; - margin: 0 auto !important; - max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important; - max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important; - margin-top: var(--zen-welcome-dialog-space) !important; -} - -/* Display the vertical tabs on the right side */ - -@media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) { - #navigator-toolbox { - order: 4; - padding-left: 0; - } - - @media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - padding-left: 5px; - } - } - - #zen-sidebar-splitter { - order: 3; - } - - #tabbrowser-tabbox { - padding-left: 10px; - } - - #tabbrowser-tabpanels .browserSidebarContainer { - margin-right: 0 !important; - } -} diff --git a/src/browser/themes/shared/zen-decks.css b/src/browser/themes/shared/zen-decks.css deleted file mode 100644 index 8abfc2fcb..000000000 --- a/src/browser/themes/shared/zen-decks.css +++ /dev/null @@ -1,51 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -/** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/ - -#tabbrowser-tabpanels[zen-split-view="true"] { - display: flex; - flex-direction: row; -} - -#tabbrowser-tabpanels[zen-split-view="true"] > *:not([zen-split="true"]) { - flex: 0; - margin: 0 !important; -} - -#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split="true"] { - flex: 1; - margin-right: 5px !important; -} - -#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split-anim="true"] { - animation: zen-deck-fadeIn 0.2s forwards; -} - -#tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer[zen-split-active="true"] { - box-shadow: 0 0 0 2px var(--zen-primary-color) !important; -} - -#tabbrowser-tabpanels:has(> [zen-split="true"]) { - display: grid; - grid-gap: 0 5px !important; -} - -@keyframes zen-deck-fadeIn { - 0% { - transform: scale(0.9); - opacity: 0; - } - - 100% { - transform: scale(1); - opacity: 1; - } -} - -#zen-split-views-box:not([hidden="true"]) { - display: flex !important; -} diff --git a/src/browser/themes/shared/zen-panel-ui.css b/src/browser/themes/shared/zen-panel-ui.css deleted file mode 100644 index 179247d07..000000000 --- a/src/browser/themes/shared/zen-panel-ui.css +++ /dev/null @@ -1,395 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -#PanelUI-zen-profiles { - --menu-panel-width: 19em; - position: relative; - padding-bottom: 5px; -} - -#PanelUI-zen-profiles-header { - width: 280px; - height: 130px; - background: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%); - position: relative; -} - -#PanelUI-zen-profiles-user-picture { - background-image: var(--avatar-image-url); - width: 75px; - height: 75px; - border: 4px var(--arrowpanel-background) solid; - background-color: var(--zen-colors-primary-foreground); - border-radius: 50%; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - margin: 0 auto; - transform: translateY(100%); -} - -.PanelUI-zen-profiles-item { - position: relative; - display: flex; - padding: 6px 10px; - font: menu; - align-items: center; -} - -#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item { - margin-bottom: 2px; - border-radius: 5px; - margin: 2px 5px; -} - -#PanelUI-zen-profiles-list > toolbarseparator:first-child { - margin: 5px; -} - -.PanelUI-zen-profiles-item:hover { - background: var(--panel-item-hover-bgcolor); - color: inherit; -} - -.PanelUI-zen-profiles-item::after { - content: ''; - background-image: url("chrome://global/skin/icons/arrow-right.svg"); - background-size: 1em; - background-repeat: no-repeat; - background-position: center; - width: 1em; - height: 1em; - margin-left: auto; - pointer-events: none; - top: 50%; - right: 1em; - transform: translateY(-50%); - position: absolute; -} - -@media (prefers-color-scheme: dark) { - .PanelUI-zen-profiles-item::after { - filter: invert(1); - } -} - -#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-avatar { - width: 20px; - height: 20px; - border-radius: 5px; - margin: 1px 0.5em 1px 1px; -} - -#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-name { - font-weight: normal; - font-size: 15px; - margin-left: 5px; -} - -#PanelUI-zen-profiles-current-info { - --zen-separation-from-content: 35px; - margin-top: calc(var(--zen-separation-from-content) + 30px); /** Ignore the profile picture */ -} - -#PanelUI-zen-profiles-current-name { - font-size: 1.3em; - font-weight: 600; - line-height: 0.5; - padding: 5px 10px; - border-radius: 5px; - margin: 0 auto; -} - - -#PanelUI-zen-profiles toolbarbutton::after { - display: none; -} - -#PanelUI-zen-profiles toolbarbutton { - padding-left: 16px; - padding-right: 16px; -} - - -#PanelUI-zen-profiles toolbarbutton:last-child { - margin-bottom: 5px !important; -} - -#PanelUI-zen-profiles-current-profile-current { - font-size: 13px; - opacity: 0.5; - margin: 0 auto var(--zen-separation-from-content) auto; - font-size: 15px; - font-weight: 600; -} - - -#PanelUI-zen-profiles-actions { - color-scheme: dark; - position: absolute; - top: 10px; - right: 10px; - border-radius: 10px !important; - padding: 1px 10px !important; - transition: .1s; - color: light-dark(white, black); - background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); -} - -#PanelUI-zen-profiles-managePrfs:hover { - background: var(--panel-item-hover-bgcolor); -} - -#PanelUI-zen-profiles-actions toolbarbutton { - cursor: pointer; - padding: 0; -} - -#PanelUI-zen-profiles-actions toolbarbutton .toolbarbutton-icon { - width: 14px !important; -} - -#PanelUI-zen-profiles-actions toolbarbutton:not(:first-child) { - margin-left: 10px; -} - -#PanelUI-zen-profiles-actions toolbarbutton label { - display: none !important; -} - -/* Split view panel */ - -#zenSplitViewModifierViewDefault { - min-width: 180px; - min-height: 180px; - - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - - gap: 10px; - padding: 15px; -} - -#zenSplitViewModifierViewDefault > vbox { - display: flex; - align-items: center; - flex-direction: column; - cursor: pointer; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview { - border-radius: 5px; - border: 1px solid var(--zen-colors-border); - width: 100px; - height: 70px; - overflow: hidden; - padding: 5px; - user-select: none; - font-weight: 500; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active { - box-shadow: 0 0 0 2px var(--zen-primary-color); - border-width: 0px; -} - -#zenSplitViewModifierViewDefault p { - margin-top: 5px; - margin-bottom: 0; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box { - background-color: var(--zen-colors-secondary); - border-radius: 3px; - width: 100%; - height: 100%; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep { - display: flex; - flex-direction: column; - justify-content: space-between; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child { - margin-top: 5px; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child { - margin-left: 5px; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid { - display: grid; - grid-template-areas: "a b" "c b"; - gap: 5px; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) { - grid-area: a; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) { - grid-area: b; -} - -#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) { - grid-area: c; -} - -/* Workspaces */ - -#zen-workspaces-button { - border: 1px solid var(--zen-colors-border); - border-radius: 50px; - height: calc(var(--zen-sidebar-action-button-width) - 10px) !important; - margin-bottom: 5px !important; - justify-content: center; - align-items: center; - display: flex; -} - -#PanelUI-zen-workspaces { - --panel-width: 320px; - --panel-padding: 0; -} - -#PanelUI-zen-workspaces > panelmultiview { - align-items: flex-start; -} - -#PanelUI-zen-workspaces panelmultiview panelview { - position: relative; - padding: 15px; - width: var(--panel-width); - min-height: 150px; -} - -#PanelUI-zen-workspaces-create-input { - margin-top: 10px; -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton { - width: 30px; - height: 30px; - display: flex; - justify-content: center; - align-items: center; - border: 2px solid transparent; - border-radius: 7px; -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"] { - border-color: var(--zen-colors-secondary); -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-icon { - display: none; -} - -#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-text { - min-width: unset; -} - -#PanelUI-zen-workspaces-create-icons-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); - gap: 8px; -} - -#PanelUI-zen-workspaces-list { - display: flex; - flex-direction: column; -} - -#PanelUI-zen-workspaces-list[empty="true"] { - font-weight: 600; - padding: 10px; - width: 100%; - text-align: start; - opacity: 0.5; -} - -#PanelUI-zen-workspaces-current-info toolbarbutton:last-child { - margin-bottom: 0 !important; -} - -#PanelUI-zen-workspaces-list toolbarbutton, -#PanelUI-zen-workspaces-current-info toolbarbutton { - padding: 5px; - border-radius: 7px; - - margin-left: 0 !important; - margin-right: 0 !important; - - display: flex; - align-items: center; - - &:first-child { - margin-top: 10px; - } - - & .zen-workspace-icon { - width: 30px; - height: 30px; - border-radius: 7px; - margin-right: 10px; - border: 1px solid var(--zen-colors-border); - display: flex; - justify-content: center; - align-items: center; - font-weight: 600; - } - - & .zen-workspace-name { - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - & .zen-workspace-actions { - display: none; - margin: 0; - margin-left: auto !important; - } - - &:hover .zen-workspace-actions, - & .zen-workspace-actions[active="true"] { - display: flex; - } -} - -#PanelUI-zen-workspaces-current-info toolbarbutton:first-child { - margin-bottom: 10px; - margin-top: 5px; -} - -#PanelUI-zen-workspaces-view vbox:nth-child(2) { - margin-top: 10px; -} - -#PanelUI-zen-workspaces-new { - margin-left: auto; - min-height: 1px !important; - padding: 3px; - border-radius: 4px; - width: 20px; - height: 20px; -} - -#PanelUI-zen-workspaces-create-footer { - padding-bottom: 0 !important; - margin-top: 20px; - margin-left: 0; - margin-bottom: 0 !important; - width: 100%; -} - -#PanelUI-zen-workspaces-create-footer button[default="true"] { - width: 100%; -} diff --git a/src/browser/themes/shared/zen-sidebar-panels.css b/src/browser/themes/shared/zen-sidebar-panels.css deleted file mode 100644 index 859950ff6..000000000 --- a/src/browser/themes/shared/zen-sidebar-panels.css +++ /dev/null @@ -1,278 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -#zen-sidebar-panels-wrapper { - /*min-height: 500px;*/ - display: flex; - align-items: center; - justify-content: space-between; - align-content: center; -} - -#zen-sidebar-panels-sites { - background: transparent; - max-width: 1px; - display: flex; -} - -#zen-sidebar-add-panel-button:not(:hover) image, -.zen-sidebar-panel-button:not([selected="true"], #zen-sidebar-add-panel-button) image { - background: transparent !important; -} - -.zen-sidebar-panel-button { - width: var(--zen-sidebar-action-button-width); - height: var(--zen-sidebar-action-button-width); - max-height: var(--zen-sidebar-action-button-width); - padding: 0 3px !important; - margin: 0; - justify-content: center; - align-items: center; - cursor: pointer; -} - -.zen-sidebar-panel-button image { - border-radius: 10px !important; - background: var(--toolbarbutton-hover-background); - border: 2px solid transparent; - transition: background 0.1s ease-in-out; -} - -.zen-sidebar-panel-button:hover image { - background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent); -} - -.zen-sidebar-panel-button[selected="true"] image { - border-color: var(--zen-primary-color); -} - -/** Sidebar view */ - -#zen-sidebar-web-panel-wrapper { - --zen-default-sidebar-width: 300px; - position: relative; - margin-right: 0; - display: flex; - pointer-events: none; - transition: width 0.3s ease-in-out; -} - -#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) { - max-width: 0; - padding: 0; - margin: 0; -} - -#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) { - --zen-sidebar-web-panel-spacing: 10px; - margin: var(--zen-appcontent-separator-from-window); - position: absolute; - z-index: 1; - width: -moz-available; - padding: var(--zen-sidebar-web-panel-spacing); - height: calc(100% - 10px); -} - -#zen-sidebar-web-panel:not([pinned="true"]) { - --zen-sidebar-web-panel-spacing: calc(10px / 3); -} - -#zen-sidebar-web-panel { - border-radius: var(--zen-panel-radius); - overflow: hidden; - border: var(--zen-appcontent-border); - background: var(--zen-colors-tertiary); - opacity: 0; - animation-delay: 0.1s; - flex-direction: column; - min-width: var(--zen-default-sidebar-width); - max-width: 720px; - min-height: var(--zen-default-sidebar-width); - width: calc(var(--zen-default-sidebar-width) + 200px); - pointer-events: all; - height: calc(100% - 20px); -} - -#zen-sidebar-web-panel:not([pinned="true"]) { - /* We need to always override the height */ - height: unset !important; -} - -#zen-sidebar-web-panel-splitter { - position: absolute; - top: 0; - right: 0; - height: 100%; - width: 4px; - background: transparent; - border: none; - cursor: ew-resize; -} - -#zen-sidebar-web-panel-hsplitter { - position: absolute; - bottom: -2px; - left: 0; - width: 100%; - height: 7px; - background: transparent; - border: none; - cursor: ns-resize; -} - -#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 { - display: none; - margin: 0; -} - -#zen-sidebar-web-panel:not([pinned="true"]) { - animation: zen-sidebar-panel-animation 0.3s ease-in-out forwards; -} - -#main-window[customizing="true"] #zen-sidebar-web-panel-wrapper { - display: none !important; -} - -#zen-sidebar-web-panel:not([hidden="true"]) { - display: flex; -} - -#zen-sidebar-web-panel-wrapper { - margin: 0 10px 10px 0; -} - -#zen-sidebar-web-panel[pinned="true"] { - position: absolute; - z-index: 1; - animation: zen-sidebar-panel-animation-2 0.2s ease-in-out forwards; -} - -#zen-sidebar-web-panel[hidden="true"][pinned="true"] { - display: flex; - pointer-events: none; - 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%; - min-height: 50px; - display: flex; - align-items: center; - padding: 0 5px; - border: var(--zen-appcontent-border); - border-width: 0 !important; - border-bottom-width: 1px !important; - background: transparent; - position: relative; - color-scheme: var(--toolbar-color-scheme); - -moz-window-dragging: no-drag; -} - -#zen-sidebar-web-header { - justify-content: space-between; -} - -#zen-sidebar-web-header toolbarbutton { - opacity: 0.7; -} - -#zen-sidebar-panels-wrapper { - border-top-width: 1px !important; - border-bottom-width: 0px !important; -} - -#zen-sidebar-web-panel-browser-containers { - height: 100%; - position: relative; -} - -#zen-sidebar-introduction-panel { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 0 auto; - width: 70%; -} - -#zen-sidebar-introduction-panel[hidden="true"] { - display: none; -} - -#zen-sidebar-introduction-panel h1 { - font-size: 1.5em; - font-weight: 600; - margin: 0; - margin-bottom: 5px; -} - -#zen-sidebar-introduction-panel p { - opacity: 0.7; - text-align: center; -} - -#zen-sidebar-web-panel browser[zen-sidebar-id] { - height: 100%; -} - -#zen-sidebar-web-panel-title { - font-size: 1em; - font-weight: 600; - margin: 0 10px; - padding: 0; - color: var(--text-color-deemphasized); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: -moz-available; - text-align: center; - display: block; -} diff --git a/src/browser/themes/shared/zen-sidebar.css b/src/browser/themes/shared/zen-sidebar.css deleted file mode 100644 index bbb0fcea6..000000000 --- a/src/browser/themes/shared/zen-sidebar.css +++ /dev/null @@ -1,211 +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-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); -} - -#sidebar-box { - --zen-sidebar-box-border-radius: var(--zen-browser-border-radius); - margin: 10px !important; - border-radius: var(--zen-sidebar-box-border-radius) !important; - overflow: hidden; - transition: .2s; - margin-left: 0 !important; - border: var(--zen-appcontent-border); - box-shadow: none; -} - -#sidebar-box[hidden="true"] { - width: 0 !important; - opacity: 0 !important; -} - -#sidebar-box[positionend="true"] { - order: 1 !important; -} - -#sidebar-box:not([positionend ="true"]) { - margin-right: 0 !important; -} - -#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar { - margin-right: 0 !important; - box-shadow: none !important; -} - -#sidebar-splitter { - /* we can still use the splitter but we can't see it */ - background: transparent !important; - border-color: transparent !important; - width: 1px !important; - margin-right: 5px !important; -} - -#sidebar-box[positionend] { - margin-left: 0; -} - -.zen-sidebar-action-button { - width: var(--zen-sidebar-action-button-width); - height: var(--zen-sidebar-action-button-width); - padding: 0; - margin: 0; - display: flex; - justify-content: center; - align-items: center; -} - -#TabsToolbar .toolbarbutton-1 { - width: var(--zen-sidebar-action-button-width); - height: var(--zen-sidebar-action-button-width); - margin-left: auto !important; - margin-right: auto !important; -} - -#TabsToolbar .toolbarbutton-1:not(.zen-sidebar-panel-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), -.zen-sidebar-action-button { - border-radius: 8px !important; -} - -:root[customizing] #navigator-toolbox { - display: none; -} - -#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), -#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), -.zen-sidebar-action-button:hover, -.zen-sidebar-action-button[open="true"] { - background: var(--toolbarbutton-hover-background) !important; -} - -.zen-sidebar-action-button:hover image { - background: transparent !important; -} - -.zen-sidebar-action-button label { - display: none !important; -} - -#sidebar-box[hidden="true"] .zen-sidebar-action-button, -.zen-sidebar-panel-button[animate] { - opacity: 0; - transform: translateX(-110%); - animation: zen-sidebar-button-fadeIn 0.4s forwards; -} - -@keyframes zen-sidebar-button-fadeIn { - 0% { - transform: translateX(-110%); - opacity: 0; - } - 100% { - opacity: 1; - transform: translateX(0); - } -} - -/* Icons */ - -#zen-preferences-button { - list-style-image: url("chrome://global/skin/icons/settings.svg"); -} - -#zen-history-button { - list-style-image: url("chrome://browser/skin/history.svg"); -} - -#zen-bookmark-button { - list-style-image: url(chrome://browser/skin/bookmark-hollow.svg); -} - -#zen-profile-button { - display: flex; - justify-content: center; - align-items: center; -} - -#zen-profile-button > div:last-child { - background-image: var(--avatar-image-url); - border-radius: 50%; - background-size: cover; - background-position: center; - width: 20px; - height: 20px; - border: 2px solid var(--zen-colors-border); -} - -/* Ugly code */ - -#TabsToolbar .zen-sidebar-action-button:nth-child(1), .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(2), .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(3), .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(4), .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(5), .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(6), .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(7), .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(8), .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(9), .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; } -#TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; } - -#TabsToolbar .zen-side-bar-profiles-button-panel-correction { - position: absolute; - bottom: -2px; - right: -2px; -} - -#zen-sidebar-icons-wrapper toolbarbutton { - position: relative; -} - -#zen-sidebar-icons-wrapper { - display: flex; - flex-direction: column; - padding: 0 3px; - position: relative; - background: transparent !important; - align-items: center; - justify-content: end; - min-height: fit-content; - --zen-sidebar-action-content-separator: 15px; - padding-top: var(--zen-sidebar-action-content-separator); - margin-top: var(--zen-sidebar-action-content-separator); -} - -#zen-sidebar-icons-wrapper::before { - content: ""; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 60%; - height: 1px; - background: var(--zen-colors-border); -} - -#zen-sidepanel-button[hidden="true"] { - display: none; -} - -#zen-expand-sidebar-button { - display: none; -} - -@media not (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - width: 0 !important; - } -} - -@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") { - #zen-expand-sidebar-button { - display: block; - } -} - diff --git a/src/toolkit/content/zen-fullscreen-override.css b/src/toolkit/content/zen-fullscreen-override.css deleted file mode 100644 index 4df122060..000000000 --- a/src/toolkit/content/zen-fullscreen-override.css +++ /dev/null @@ -1,16 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -[inDOMFullscreen="true"] #nav-bar, -[inDOMFullscreen="true"] #zen-sidebar-web-panel { - display: none !important; -} - -[inDOMFullscreen="true"] #appcontent { - margin: 0 !important; - border-radius: 0 !important; -} - diff --git a/src/toolkit/content/zen-xul.css b/src/toolkit/content/zen-xul.css deleted file mode 100644 index bfa458e0b..000000000 --- a/src/toolkit/content/zen-xul.css +++ /dev/null @@ -1,85 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -@import url("zen-fullscreen-override.css"); - -:root { - --zen-main-browser-background: light-dark(white, #1b1b1b); - --zen-appcontent-border: 1px solid var(--zen-colors-border); - --zen-browser-border-radius: var(--zen-panel-radius); -} - -toolbox#navigator-toolbox, -#browser { - background: transparent !important; -} - -#browser { - width: 100%; -} - -html#main-window > body { - background: var(--zen-main-browser-background) !important; -} - -:not([inDOMFullscreen="true"]) #appcontent { - overflow: hidden; -} - -#appcontent { - background: var(--toolbar-bgcolor); -} - -:not([inDOMFullscreen="true"]) #appcontent, -#sidebar-box { - /** Sidebar is already hidden in full screen mode */ - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; - border: none; -} - - -panel[type="arrow"][animate][animate="open"] { - animation: zen-jello-animation 0.2s ease-in-out; -} - -panel[type="arrow"][animate][animate="cancel"] { - animation: zen-jello-out-animation 0.2s ease-in-out; -} - -@keyframes zen-jello-animation { - 0% { - transform: scale3d(0.8, 0.8, 0.8); - } - - 60% { - transform: scale3d(1.02, 1.02, 1.02); - } - - to { - opacity: 1; - transform: scale3d(1, 1, 1); - } -} - -@keyframes zen-jello-out-animation { - 0% { - transform: scale3d(1, 1, 1); - } - - 60% { - transform: scale3d(1.02, 1.02, 1.02); - } - - 99% { - opacity: 0; - transform: scale3d(0.8, 0.8, 0.8); - } - - 100% { - -moz-window-transform: none; - transform: none; - } -} \ No newline at end of file diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css b/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css deleted file mode 100644 index 62a361f4d..000000000 --- a/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css +++ /dev/null @@ -1,33 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -@namespace html "http://www.w3.org/1999/xhtml"; -@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - -/** This file is used to override UI inside "common-shared.css" */ - -/** These types of buttons look INSAINELY bad in the preferences page */ -xul|button { - border-radius: var(--zen-button-border-radius) !important; - padding: var(--zen-button-padding) !important; - transition: .1s; - min-width: 100px !important; - font-weight: 500 !important; -} - -button:active { - transform: scale(0.95); -} - -html|button:not(:is( - .tab-button, .ghost-button, - .button-toggle, .button-edit, - .button-add -)) { - transition: .2s; - border-radius: 6px !important; - min-width: 80px !important; -} diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared.css b/src/toolkit/themes/shared/in-content/zen-common-shared.css deleted file mode 100644 index 829f75d2b..000000000 --- a/src/toolkit/themes/shared/in-content/zen-common-shared.css +++ /dev/null @@ -1,124 +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-common-shared-ui-override.css"); - -: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 */ - - /** Zen colors are generated automatically from the primary color */ - --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%); - --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, white 60%); - --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 7%, white 93%); - - --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%); - --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%); - --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 90%, black 10%); - - --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 80%); - - --zen-dialog-background: var(--zen-colors-tertiary); - --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f1f1f1 92%); - - --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%) - ) !important; - --in-content-primary-button-background-hover: light-dark( - color-mix(in srgb, var(--zen-primary-color) 40%, black 60%), - color-mix(in srgb, var(--zen-primary-color) 40%, white 60%) - ) !important; - --in-content-primary-button-background-active: var(--zen-colors-hover-bg) !important; - --in-content-primary-button-text-color: light-dark(white, black) !important; - --in-content-primary-button-border-color: transparent !important; - --in-content-primary-button-border-hover: transparent !important; - --in-content-primary-button-border-active: var(--zen-colors-border) !important; - --zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%); - - --in-content-accent-color: var(--zen-colors-primary) !important; - - /* This is like the secondary button */ - --in-content-button-background: light-dark( - color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%), - color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%) - ) !important; - --in-content-button-background-hover: light-dark( - color-mix(in srgb, var(--zen-primary-color) 25%, transparent 75%), - color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%) - ) !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; - - --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important; - - --button-primary-bgcolor: var(--in-content-primary-button-background) !important; - --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important; - --button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important; - --button-primary-color: var(--in-content-primary-button-text-color) !important; - - --in-content-page-background: var(--zen-colors-tertiary) !important; - --zen-in-content-dialog-background: var(--zen-colors-tertiary); - - --zen-button-border-radius: 7px; - --zen-button-padding: .6rem 1.2rem; - - /* 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-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%); -} - -@media (prefers-color-scheme: dark) { - :host(:is(.anonymous-content-host, notification-message)), - :root { - --zen-in-content-dialog-background: rgb(28, 28, 32); - - --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%); - --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%); - --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%); - - --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%); - --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%); - - --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%); - --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%); - - --zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%); - --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, 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)), - :root { - --zen-button-border-radius: 20px; - } -} diff --git a/src/toolkit/themes/shared/zen-global-shared.css b/src/toolkit/themes/shared/zen-global-shared.css deleted file mode 100644 index 94978bf8b..000000000 --- a/src/toolkit/themes/shared/zen-global-shared.css +++ /dev/null @@ -1,26 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -@import url("./in-content/zen-common-shared.css"); - -:root { - --zen-panel-radius: 9px; - - --arrowpanel-background: var(--zen-dialog-background) !important; - --arrowpanel-border-color: var(--zen-dialog-border-color) !important; - --arrowpanel-border-radius: var(--zen-panel-radius) !important; - - &:-moz-lwtheme { - color: var(--lwt-text-color); - --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); - } -} - -@media (prefers-color-scheme: dark) { - :root { - --zen-dialog-border-color: rgba(255,255,255,.1); - } -} diff --git a/src/toolkit/themes/shared/zen-popup.css b/src/toolkit/themes/shared/zen-popup.css deleted file mode 100644 index 5aecf7ef8..000000000 --- a/src/toolkit/themes/shared/zen-popup.css +++ /dev/null @@ -1,445 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -:root { - --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; - --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; - - --uc-panel-zoom-button-padding: 8px; - --uc-panel-zoom-button-inline-padding: 9px; - --uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)); - - --uc-autocomplete-panel-menuitem-margin: 4px; - --uc-autocomplete-panel-menuicon-padding-inline: 14px; - --uc-autocomplete-panel-separator-margin-vertical: 4px; - - --uc-permission-itemcontainer-padding-block: 8px; - --uc-permission-item-margin-block: 4px; - --uc-permission-item-padding-inline: 16px; - - --uc-contextmenu-border-radius: 8px; - --uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0; - --uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width)); - --uc-contextmenu-menuitem-padding-block: 6px; - --uc-contextmenu-menuitem-padding-inline: 10px; - --uc-contextmenu-menuitem-border-width: 2px; - --uc-contextmenu-menuicon-margin-inline: 12px; - --uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width)); - --uc-contextmenu-menuitem-margin-block: 0px; - --uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline); - --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; - --zen-panel-separator-width: 1px; -} - -/* 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; -} - -#appMenu-fxa-label2 label, -#PanelUI-fxa-menu-syncnow-button label { - margin-block: 0 !important; -} - -.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; -} - -/* 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; -} - -.subviewbutton>.toolbarbutton-icon { - width: 15px !important; -} - -/* firefox profile avatar in appmenu */ -#appMenu-fxa-label2::before { - content: ""; - display: -moz-box; - height: 16px; - width: 16px; - background: var(--avatar-image-url) 0/16px; - scale: 1.25; - border-radius: 99px; -} - -/* disable proton account separator */ -#appMenu-fxa-separator { - border-image: none !important; -} - -#appMenu-fxa-status2:not([fxastatus]) { - padding-block: 0 !important; -} - -#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 { - margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important; -} - -/* 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; -} - -#appMenu-zoom-controls>.subviewbutton { - padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding) !important; - margin: 0 !important; -} - -#appMenu-zoom-controls>#appMenu-zoomReset-button2 { - padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important; -} - -/* #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; -} - -#appMenu-zoom-controls>#appMenu-fullscreen-button2::before { - content: ""; - border-inline-start: 1px solid var(--panel-separator-color); - display: block; - position: relative; - height: 32px; - margin-block: calc(var(--uc-panel-zoom-button-padding) * -1); - transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px)); -} - -#appMenu-zoomReset-button2 { - height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important; - min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important; -} - -#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; -} - -#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; -} - -#appMenu-zoomReset-button2>.toolbarbutton-text, -#appMenu-fullscreen-button2>.toolbarbutton-icon { - background-color: transparent !important; - padding: 0 !important; -} - -.subviewbutton[shortcut]::after { - opacity: 0.7 !important; -} - -#widget-overflow-mainView .panel-subview-body { - padding-bottom: 0 !important; -} - -.PanelUI-subView>.panel-header+toolbarseparator { - margin-bottom: 0 !important; -} - -.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body { - padding-top: var(--panel-separator-margin-vertical) !important; -} - -#identity-popup-security-button { - margin-bottom: var(--panel-separator-margin-vertical) !important; -} - -#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; -} - -/* URL bar popup */ - -.identity-popup-security-connection>hbox>description { - margin-inline-start: 0 !important; -} - -.identity-popup-security-connection.identity-button { - margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important; -} - -#identity-popup-mainView-panel-header-span, -#permission-popup-mainView-panel-header-span, -#identity-popup-mainView-panel-header label, -#permission-popup-mainView-panel-header label, -#protections-popup-mainView-panel-header-span { - margin-block: 0 !important; -} - -.permission-popup-section { - padding-block: var(--uc-permission-itemcontainer-padding-block) !important; -} - -#permission-popup-permissions-content { - padding-inline: var(--uc-permission-item-padding-inline) !important; -} - -.permission-popup-permission-item, -#permission-popup-storage-access-permission-list-header { - margin-block: var(--uc-permission-item-margin-block) !important; -} - -.permission-popup-permission-label, -.permission-popup-permission-header-label { - margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important; -} - -#editBookmarkPanel>#editBookmarkHeaderSeparator, -#editBookmarkPanel>.panel-subview-body>#editBookmarkSeparator { - margin-inline: 0 !important; -} - -#identity-popup-mainView > toolbarseparator:first-child, -#unified-extensions-view > toolbarseparator:first-child { - display: none !important; - opacity: 0 !important; -} - - -menupopup::part(content), -panel::part(content) { - border: var(--zen-appcontent-border) !important; -} - -menupopup, -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; -} - -#identity-popup-clear-sitedata-footer { - margin-bottom: 0 !important; - padding-top: 0 !important; -} - -/* Dialog box */ - -.printDialogBox { - max-width: 90vw !important; -} - -.printSettingsBrowser { - min-width: 350px !important; -} - -/* Context menu */ -menu, menuitem { - &:where([_moz-menuactive]:not([disabled="true"])) { - background-color: var(--button-hover-bgcolor); - 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); - } - } -} From e474815d7e5d35a2b0b8467825ae5a9a7319c58d Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Tue, 13 Aug 2024 16:43:15 +0200 Subject: [PATCH 02/14] Remove unused CSS files related to Zen theme --- src/browser/themes/shared/browser-shared-css.patch | 10 ---------- src/browser/themes/shared/sidebar-css.patch | 13 ------------- src/toolkit/content/jar-mn.patch | 12 ------------ src/toolkit/content/xul-css.patch | 9 --------- .../shared/in-content/common-shared-css.patch | 9 --------- src/toolkit/themes/shared/popup-css.patch | 9 --------- 6 files changed, 62 deletions(-) delete mode 100644 src/browser/themes/shared/sidebar-css.patch delete mode 100644 src/toolkit/content/jar-mn.patch diff --git a/src/browser/themes/shared/browser-shared-css.patch b/src/browser/themes/shared/browser-shared-css.patch index f048fce61..336e80efe 100644 --- a/src/browser/themes/shared/browser-shared-css.patch +++ b/src/browser/themes/shared/browser-shared-css.patch @@ -2,16 +2,6 @@ diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/br index f2171eb033a1143870f4708c63f565fabb535c4b..a21631e56e74d5d1887554d2752a612887ed20c5 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; diff --git a/src/browser/themes/shared/sidebar-css.patch b/src/browser/themes/shared/sidebar-css.patch deleted file mode 100644 index 65f8a2382..000000000 --- a/src/browser/themes/shared/sidebar-css.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css -index a9b3886e1ff4a36c5bd161985719f66a41d95458..242b3ad30785bed1937d9bf99e8abc7427111541 100644 ---- a/browser/themes/shared/sidebar.css -+++ b/browser/themes/shared/sidebar.css -@@ -2,6 +2,8 @@ - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -+@import url("chrome://browser/skin/zen-sidebar.css"); -+ - @namespace html url("http://www.w3.org/1999/xhtml"); - - :root { diff --git a/src/toolkit/content/jar-mn.patch b/src/toolkit/content/jar-mn.patch deleted file mode 100644 index 6faef7f7d..000000000 --- a/src/toolkit/content/jar-mn.patch +++ /dev/null @@ -1,12 +0,0 @@ -diff --git a/toolkit/content/jar.mn b/toolkit/content/jar.mn -index 8b18c945253d00603891cc5f0b989476318e219c..c5368eec8d9a760c19a827fe7a4b9afb4b702976 100644 ---- a/toolkit/content/jar.mn -+++ b/toolkit/content/jar.mn -@@ -143,3 +143,7 @@ toolkit.jar: - # Third party files - content/global/third_party/d3/d3.js (/third_party/js/d3/d3.js) - content/global/third_party/cfworker/json-schema.js (/third_party/js/cfworker/json-schema.js) -+ -+# Zen modules -+ content/global/zen-xul.css -+ content/global/zen-fullscreen-override.css diff --git a/src/toolkit/content/xul-css.patch b/src/toolkit/content/xul-css.patch index 3522c33cb..1f515d3d1 100644 --- a/src/toolkit/content/xul-css.patch +++ b/src/toolkit/content/xul-css.patch @@ -2,15 +2,6 @@ diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css index 908132d598083dd43ee62940f4bac84e49238c92..eb7edf3870032fe796b3fa676de96e1dbb5eea85 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) { } diff --git a/src/toolkit/themes/shared/in-content/common-shared-css.patch b/src/toolkit/themes/shared/in-content/common-shared-css.patch index d9dba00ca..7a19bafb5 100644 --- a/src/toolkit/themes/shared/in-content/common-shared-css.patch +++ b/src/toolkit/themes/shared/in-content/common-shared-css.patch @@ -2,15 +2,6 @@ diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..92705331fa12d88e9091310c1f527562931e7132 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"); -+ - @namespace html "http://www.w3.org/1999/xhtml"; - @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - @@ -63,7 +65,7 @@ --in-content-table-border-color: var(--in-content-box-border-color); --in-content-table-header-background: var(--in-content-primary-button-background); diff --git a/src/toolkit/themes/shared/popup-css.patch b/src/toolkit/themes/shared/popup-css.patch index 3c94d3ea8..5a39b60f3 100644 --- a/src/toolkit/themes/shared/popup-css.patch +++ b/src/toolkit/themes/shared/popup-css.patch @@ -2,15 +2,6 @@ diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css index ed230860215c734e6fb903b3660d0c679043e3f3..348436a56cecdf101da66cdec9d64f1bb851ba4d 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; From 19ccd0760af2fa92b9129f51118ee3aacf05a022 Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Tue, 13 Aug 2024 18:19:30 +0200 Subject: [PATCH 03/14] Remove unused CSS files related to Zen theme --- src/browser/app/profile/zen-browser.js | 1 + src/browser/base/content/browser-xhtml.patch | 2 +- ...scripts.inc.xhtml => zen-assets.inc.xhtml} | 5 + ...ripts.jar.inc.mn => zen-assets.jar.inc.mn} | 8 +- .../base/content/zen-styles/zen-tabs.css | 4 + .../zen-styles/zen-tabs/horizontal-tabs.css | 2 + .../zen-styles/zen-tabs/vertical-tabs.css | 0 .../base/content/zen-styles/zen-theme.css | 102 ++++++++++++++++++ src/browser/base/content/zenThemeModifier.js | 8 ++ src/browser/base/jar-mn.patch | 2 +- src/browser/themes/shared/zen-sources.inc.mn | 7 -- 11 files changed, 131 insertions(+), 10 deletions(-) rename src/browser/base/content/{zen-scripts.inc.xhtml => zen-assets.inc.xhtml} (71%) rename src/browser/base/content/{zen-scripts.jar.inc.mn => zen-assets.jar.inc.mn} (67%) create mode 100644 src/browser/base/content/zen-styles/zen-tabs.css create mode 100644 src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css create mode 100644 src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css create mode 100644 src/browser/base/content/zen-styles/zen-theme.css diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 017cc5f78..b9dd02ba9 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -63,6 +63,7 @@ pref('zen.welcomeScreen.seen', false); pref('zen.tabs.vertical', true); pref('zen.tabs.vertical.right-side', false); pref('zen.theme.accent-color', "#aac7ff"); +pref('zen.theme.border-radius', 10); // In pixels pref('zen.theme.toolbar-themed', true); pref('zen.theme.pill-button', false); pref('zen.theme.floating-urlbar', false); diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch index 1c6aa3fb6..9cca1cc95 100644 --- a/src/browser/base/content/browser-xhtml.patch +++ b/src/browser/base/content/browser-xhtml.patch @@ -7,7 +7,7 @@ index 3063370347db9e2812ad30205e585c849e44c91e..be74d9e624b8220cb9bd009bae31fb51 gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true }); +#include zen-locales.inc.xhtml -+#include zen-scripts.inc.xhtml ++#include zen-assets.inc.xhtml # All sets except for popupsets (commands, keys, and stringbundles) diff --git a/src/browser/base/content/zen-scripts.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml similarity index 71% rename from src/browser/base/content/zen-scripts.inc.xhtml rename to src/browser/base/content/zen-assets.inc.xhtml index c8dd76038..faa258ac5 100644 --- a/src/browser/base/content/zen-scripts.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -1,3 +1,8 @@ + + + + + @@ -11,7 +11,7 @@ index 3063370347db9e2812ad30205e585c849e44c91e..be74d9e624b8220cb9bd009bae31fb51 # All sets except for popupsets (commands, keys, and stringbundles) -@@ -160,9 +162,12 @@ +@@ -159,9 +161,12 @@ @@ -27,7 +27,7 @@ index 3063370347db9e2812ad30205e585c849e44c91e..be74d9e624b8220cb9bd009bae31fb51