From e672ce2cc3b72e0b603f4c81edaf325b2f26d690 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=A0?= Date: Wed, 1 Sep 2021 19:42:05 +0200 Subject: [PATCH] Implement theme color-based transparent tabs (closes #48) --- native/userchrome/profile/chrome/pwa/content/browser.css | 7 +++++++ .../profile/chrome/pwa/utils/systemIntegration.jsm | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/native/userchrome/profile/chrome/pwa/content/browser.css b/native/userchrome/profile/chrome/pwa/content/browser.css index 90bd7fc1..a04400d9 100644 --- a/native/userchrome/profile/chrome/pwa/content/browser.css +++ b/native/userchrome/profile/chrome/pwa/content/browser.css @@ -10,6 +10,13 @@ --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; } + /* Fix tab colors */ + + .tab-background[multiselected="true"], .tab-background[selected="true"] { + background-color: rgba(0, 0, 0, 0.1) !important; + background-image: none !important; + } + /* Hide tabs and tab-related elements when tabs mode is disabled */ html:not([tabsmode]) #new-tab-button, diff --git a/native/userchrome/profile/chrome/pwa/utils/systemIntegration.jsm b/native/userchrome/profile/chrome/pwa/utils/systemIntegration.jsm index 15c5799a..855c20e9 100644 --- a/native/userchrome/profile/chrome/pwa/utils/systemIntegration.jsm +++ b/native/userchrome/profile/chrome/pwa/utils/systemIntegration.jsm @@ -127,8 +127,9 @@ function setWindowColors (window, site) { const brightness = Math.round(((colors[0] * 299) + (colors[1] * 587) + (colors[2] * 114)) / 1000); const textColor = (brightness > 125) ? 'black' : 'white'; - // Set background and text colors to the titlebar + // Set background and text colors to the titlebar and tabs styles.innerHTML += `#navigator-toolbox, html[tabsintitlebar] #main-menubar > *, html[tabsintitlebar] #titlebar > * { background-color: ${themeColor} !important; color: ${textColor} !important; }`; + styles.innerHTML += `.tabbrowser-tab { color: ${textColor} !important; }`; // Some Gtk+ themes use rounded corners, so Firefox by default disables styling of the titlebar // We need to detect and prevent this, and add own rounded corners using CSS