diff --git a/prefs/zen/theme.yaml b/prefs/zen/theme.yaml index d03379110..4ec634e9a 100644 --- a/prefs/zen/theme.yaml +++ b/prefs/zen/theme.yaml @@ -41,12 +41,7 @@ # ==== Mark: border radius ==== -# macOS border radius +# -1 will use platform-native values +# Set to a positive value to override with a custom radius - name: zen.theme.border-radius - value: 10 - condition: 'defined(XP_MACOSX)' - -# non-macOS border radius -- name: zen.theme.border-radius - value: 8 - condition: '!defined(XP_MACOSX)' + value: -1 diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index 7378c0097..f8ac28b5b 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -232,7 +232,7 @@ body > #confetti { #zen-update-animation-border { position: absolute; - border-radius: var(--zen-native-content-radius); + border-radius: var(--zen-border-radius); width: 100%; height: 100%; } diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 3acee7cdb..cc6b2dde7 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -232,8 +232,8 @@ --toolbar-field-color: var(--toolbox-textcolor) !important; &[zen-private-window='true'] { - --zen-main-browser-background: linear-gradient(130deg, - color-mix(in srgb, rgb(10, 6, 11) 80%, var(--zen-themed-toolbar-bg-transparent)) 0%, + --zen-main-browser-background: linear-gradient(130deg, + color-mix(in srgb, rgb(10, 6, 11) 80%, var(--zen-themed-toolbar-bg-transparent)) 0%, color-mix(in srgb, rgb(19, 7, 22) 80%, var(--zen-themed-toolbar-bg-transparent)) 100% ); --zen-main-browser-background-toolbar: var(--zen-main-browser-background); @@ -268,21 +268,13 @@ ); --zen-sidebar-notification-shadow: 0 0 6px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); - /* Nativity */ - --zen-native-content-radius: var(--zen-border-radius); - @media (-moz-platform: linux) { - --zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius); - } - @media (-moz-mac-tahoe-theme) { - --zen-native-content-radius: 15px; - } --zen-native-inner-radius: var( --zen-webview-border-radius, /* Inner radius calculation: * 1. If the native radius - the separation is less than 4px, use 4px. * 2. Otherwise, use the the calculated value (inner radius = outer radius - separation). */ - max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2)) + max(5px, calc(var(--zen-border-radius) - var(--zen-element-separation) / 2)) ); /** Other theme-related styles */ @@ -306,7 +298,7 @@ #main-window:not([chromehidden~='toolbar']) { min-height: 495px !important; - @media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and + @media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency')) { background: transparent; --zen-themed-toolbar-bg-transparent: transparent; diff --git a/src/zen/common/zenThemeModifier.js b/src/zen/common/zenThemeModifier.js index 06f4674c4..9e74dd801 100644 --- a/src/zen/common/zenThemeModifier.js +++ b/src/zen/common/zenThemeModifier.js @@ -19,7 +19,7 @@ const kZenMaxElementSeparation = 12; /** * ZenThemeModifier controls the application of theme data to the browser, - * for examplem, it injects the accent color to the document. This is used + * for example, it injects the accent color to the document. This is used * because we need a way to apply the accent color without having to worry about * shadow roots not inheriting the accent color. * @@ -87,8 +87,28 @@ var ZenThemeModifier = { }, updateBorderRadius() { - const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius'); - document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px'); + const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius', -1); + + // -1 is the default value, will use platform-native values + // otherwise, use the custom value + if (borderRadius == -1) { + if (AppConstants.platform == 'macosx') { + const targetRadius = window.matchMedia('(-moz-mac-tahoe-theme)').matches ? 15 : 10; + document.documentElement.style.setProperty('--zen-border-radius', targetRadius + 'px'); + } else if (AppConstants.platform == 'linux') { + // Linux uses GTK CSD titlebar radius, default to 8px + document.documentElement.style.setProperty( + '--zen-border-radius', + 'env(-moz-gtk-csd-titlebar-radius, 8px)' + ); + } else { + // Windows defaults to 8px + document.documentElement.style.setProperty('--zen-border-radius', '8px'); + } + } else { + // Use the overridden value + document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px'); + } }, updateElementSeparation() { diff --git a/src/zen/downloads/zen-download-box-animation.css b/src/zen/downloads/zen-download-box-animation.css index 211a8091e..e182f1f0f 100644 --- a/src/zen/downloads/zen-download-box-animation.css +++ b/src/zen/downloads/zen-download-box-animation.css @@ -11,7 +11,7 @@ align-items: center; justify-content: center; background-color: var(--toolbar-color); - border-radius: var(--zen-native-content-radius); + border-radius: var(--zen-border-radius); box-shadow: var(--zen-big-shadow); pointer-events: none; z-index: 1100;