diff --git a/.prettierignore b/.prettierignore index 9ecc5ffd..55b51810 100644 --- a/.prettierignore +++ b/.prettierignore @@ -9,6 +9,8 @@ engine/ **/*.svg +**/*.inc.css + surfer.json src/browser/app/profile/*.js @@ -26,4 +28,6 @@ src/zen/tabs/zen-tabs.css src/zen/compact-mode/zen-compact-mode.css src/zen/common/ZenEmojies.mjs +src/zen/workspaces/zen-workspaces.css + *.inc diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index e743a2a4..b083e20e 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -45,7 +45,7 @@ content/browser/zen-components/ZenWorkspacesStorage.mjs (../../zen/workspaces/ZenWorkspacesStorage.mjs) content/browser/zen-components/ZenWorkspacesSync.mjs (../../zen/workspaces/ZenWorkspacesSync.mjs) content/browser/zen-components/ZenGradientGenerator.mjs (../../zen/workspaces/ZenGradientGenerator.mjs) - content/browser/zen-styles/zen-workspaces.css (../../zen/workspaces/zen-workspaces.css) +* content/browser/zen-styles/zen-workspaces.css (../../zen/workspaces/zen-workspaces.css) content/browser/zen-styles/zen-gradient-generator.css (../../zen/workspaces/zen-gradient-generator.css) content/browser/zen-components/ZenKeyboardShortcuts.mjs (../../zen/kbs/ZenKeyboardShortcuts.mjs) diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index 61e1fff4..956bec0b 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -65,10 +65,8 @@ bottom: var(--zen-element-separation); padding: 0 var(--zen-compact-float) !important; - :root[zen-single-toolbar='true'] & { top: calc(var(--zen-element-separation) / 2); height: calc(100% - var(--zen-element-separation)); - } & #zen-sidebar-top-buttons { margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0; diff --git a/src/zen/workspaces/overflow-icons.inc.css b/src/zen/workspaces/overflow-icons.inc.css new file mode 100644 index 00000000..7d966fdd --- /dev/null +++ b/src/zen/workspaces/overflow-icons.inc.css @@ -0,0 +1,29 @@ +/* + * 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/. + */ + +&:not(:hover) { + width: min(var(--zen-overflowed-workspace-button-width), 25px); + &::after { + content: ''; + position: absolute; + width: 4px; + border-radius: 99px; + height: 4px; + background: color-mix( + in srgb, + var(--zen-primary-color) 10%, + light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90% + ); + left: 50%; + top: 50%; + filter: saturate(140%) brightness(110%) !important; + transform: translate(-50%, -50%); + } + + & .zen-workspace-icon { + display: none; + } +} diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index 386e99f9..7d7afa51 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -72,32 +72,14 @@ margin: 0; } - & toolbarbutton:not([active='true']), + /* Inlcude separately since ther'es a bug in the + * rendering of XUL in firefox */ + & toolbarbutton:not([active='true']) { +%include overflow-icons.inc.css + } + &:has(toolbarbutton:hover) toolbarbutton[active='true'] { - &:not(:hover) { - width: min(var(--zen-overflowed-workspace-button-width), 25px); - - &::after { - content: ''; - position: absolute; - width: 4px; - border-radius: 99px; - height: 4px; - background: color-mix( - in srgb, - var(--zen-primary-color) 10%, - light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90% - ); - left: 50%; - top: 50%; - filter: saturate(140%) brightness(110%) !important; - transform: translate(-50%, -50%); - } - - & .zen-workspace-icon { - display: none; - } - } +%include overflow-icons.inc.css } } }