From 6f4ca90b4869c55c73253cd73eb214cacb3d456e Mon Sep 17 00:00:00 2001 From: aminomancer <33384265+aminomancer@users.noreply.github.com> Date: Fri, 7 Jan 2022 01:28:57 -0800 Subject: [PATCH] 3.1.0: major update for addon themes. (JS) new script: extensionStylesheetLoader.uc.js this adds an attribute to the root element on all addon documents, so userContent.css can select them. this way you don't need to use @-moz-document url(...) and can instead use :root[uc-extension-id="..."] that's important because the addon's host name is randomized on install. so now you'll be able to use my themes for various addons, you won't have to edit the stylesheet every time you reinstall an addon, and anyone else can share their own themes with this script too. also update two scripts commensurately with this change. miscMods.uc.js and urlbarMods.uc.js now add attributes to chrome elements so that we can select them without extension URLs. so this constitutes a pretty big improvement, since those CSS rules previously weren't working for anyone except me. now they'll work for everyone. also update searchSelectionShortcut to eliminate a bug where the script would occasionally create a "chrome" folder in your devtools chrome_debugger_profile, preventing our stylesheets from injecting into devtools. make sure you go into your profile folder (roaming) and delete chrome_debugger_profile if it exists. update tabMods.uc.js to 1.3.1 to fix tab label height. (CSS) refactor every addon theme to make them work with this new script. refactor some other styles for the same goal. fix tab label height. add a stylesheet for mozilla websites. (fonts) replace Overpass Mono with Fira Code. see the attached commit notes for more changes. --- JS/extensionStylesheetLoader.uc.js | 108 +++++ JS/miscMods.uc.js | 20 +- JS/searchSelectionShortcut.uc.js | 102 +++-- JS/urlbarMods.uc.js | 51 ++- README.md | 12 +- resources/in-content/ext-bitwarden.css | 52 +-- resources/in-content/ext-containers.css | 384 ++++++++++-------- resources/in-content/ext-darkreader.css | 128 +++--- resources/in-content/ext-firefoxnotes.css | 177 ++++---- resources/in-content/ext-mdm.css | 46 ++- resources/in-content/ext-nordvpn.css | 114 +++--- resources/in-content/ext-simpletranslate.css | 79 ++-- resources/in-content/ext-sortbookmarks.css | 77 ++-- resources/in-content/ext-tabnotes.css | 14 +- resources/in-content/ext-ublock.css | 112 ++--- resources/in-content/root.css | 10 +- resources/in-content/site-github.css | 10 +- resources/in-content/site-mozilla.css | 15 + resources/in-content/system.css | 24 +- resources/layout/XMLPrettyPrint.css | 6 +- .../layout/contentaccessible/viewsource.css | 17 +- resources/script-override/tabMods.uc.js | 3 +- uc-search-one-offs.css | 4 +- uc-tabs.css | 4 + uc-urlbar-results.css | 4 +- uc-urlbar.css | 3 +- userChrome.ag.css | 2 +- userChrome.au.css | 4 + userChrome.css | 2 +- userContent.css | 1 + 30 files changed, 960 insertions(+), 625 deletions(-) create mode 100644 JS/extensionStylesheetLoader.uc.js create mode 100644 resources/in-content/site-mozilla.css diff --git a/JS/extensionStylesheetLoader.uc.js b/JS/extensionStylesheetLoader.uc.js new file mode 100644 index 00000000..6bd5bf4e --- /dev/null +++ b/JS/extensionStylesheetLoader.uc.js @@ -0,0 +1,108 @@ +// ==UserScript== +// @name Extension Stylesheet Loader +// @version 1.0.0 +// @author aminomancer +// @homepage https://github.com/aminomancer +// @description Allows users to share stylesheets for webextensions without needing to edit the +// URL. This works by creating an actor in every extension browser that sets an attribute on the +// root element to expose the addon's ID to user stylesheets. This means we can use the addon's ID +// instead of @-moz-document url(). That is good because addons' URLs are randomly generated upon +// install, meaning the URLs I specify in resources/in-content/ext-*.css will not be the same as +// yours, so they will not work for you. You can also use this in combination with my +// debugExtensionInToolbarContextMenu.uc.js to add your own style rules for extension content. Once +// you have that script installed, you can right-click an addon's toolbar button > Debug Extension > +// Copy ID. Then, in userContent.css, add a rule like +// :root[uc-extension-id="example@aminomancer"]{color:red} Keep in mind, the ID is not the same as +// the URL. That's why this script is necessary in the first place. URLs are random, unique, and +// per-install. Conversely, an extension's ID is permanent and universal, but potentially not +// unique, in that two authors could potentially make extensions with the same ID. I haven't seen +// this before but it's possible, in principle. If you need to, you can find the ID by navigating to +// about:debugging#/runtime/this-firefox +// @license This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. +// @include main +// @onlyonce +// ==/UserScript== + +class ExtensionStylesheetLoader { + constructor() { + this.setup(); + } + async setup() { + // make a temp directory for our child file + const registrar = Components.manager.QueryInterface(Ci.nsIComponentRegistrar); + let tempDir = FileUtils.getFile("UChrm", [".ExtensionStylesheetLoader"]); + let { path } = tempDir; + await IOUtils.makeDirectory(path, { ignoreExisting: true, createAncestors: false }); + // hide the temp dir on windows so it doesn't get in the way of user activities or prevent its eventual deletion. + if (AppConstants.platform === "win") { + if ("setWindowsAttributes" in IOUtils) + await IOUtils.setWindowsAttributes(path, { hidden: true }); + } + this.tempPath = path; + + // create a manifest file that registers a URI for chrome://uc-extensionstylesheetloader/content/ + this.manifestFile = await this.createTempFile(`content uc-extensionstylesheetloader ./`, { + name: "ucsss", + type: "manifest", + }); + this.childFile = await this.createTempFile( + `"use strict";const EXPORTED_SYMBOLS=["ExtensionStylesheetLoaderChild"];const{WebExtensionPolicy}=Cu.getGlobalForObject(Cu);class ExtensionStylesheetLoaderChild extends JSWindowActorChild{handleEvent(e){let policy=WebExtensionPolicy.getByHostname(this.document.location.hostname);if(policy&&policy.id)this.document.documentElement.setAttribute("uc-extension-id",policy.id)}}`, + { name: "ExtensionStylesheetLoaderChild", type: "jsm" } + ); + + let manifest = FileUtils.getFile("UChrm", [ + ".ExtensionStylesheetLoader", + this.manifestFile.name, + ]); + if (manifest.exists()) registrar.autoRegister(manifest); + else return; + ChromeUtils.registerWindowActor("ExtensionStylesheetLoader", { + child: { + moduleURI: this.childFile.url, + events: { DOMDocElementInserted: {} }, + }, + allFrames: true, + matches: ["moz-extension://*/*"], + messageManagerGroups: ["browsers", "webext-browsers", "sidebars"], + }); + // listen for application quit so we can clean up the temp files. + Services.obs.addObserver(this, "quit-application"); + } + /** + * create a file in the temp folder + * @param {string} contents (the actual file contents in UTF-8) + * @param {object} options (an optional object containing properties path or name. path creates a file at a specific absolute path. name creates a file of that name in the chrome/.ExtensionStylesheetLoader folder. if omitted, it will create chrome/.ExtensionStylesheetLoader/uc-temp) + * @returns {object} { name, url } (an object containing the filename and a chrome:// URL leading to the file) + */ + async createTempFile(contents, options = {}) { + let { path = null, name = "uc-temp", type = "txt" } = options; + const uuid = Cc["@mozilla.org/uuid-generator;1"] + .getService(Ci.nsIUUIDGenerator) + .generateUUID() + .toString(); + name += "-" + uuid + "." + type; + if (!path) path = FileUtils.getFile("UChrm", [".ExtensionStylesheetLoader", name]).path; + await IOUtils.writeUTF8(path, contents); + let url = "chrome://uc-extensionstylesheetloader/content/" + name; + return { name, url }; + } + // application quit listener. clean up the temp files. + observe(subject, topic, data) { + switch (topic) { + case "quit-application": + Services.obs.removeObserver(this, "quit-application"); + this.cleanup(); + break; + default: + } + } + // remove the temp directory when firefox's main process ends + async cleanup() { + await IOUtils.remove(this.tempPath, { + ignoreAbsent: true, + recursive: true, + }); + } +} + +if (location.href === AppConstants.BROWSER_CHROME_URL) new ExtensionStylesheetLoader(); diff --git a/JS/miscMods.uc.js b/JS/miscMods.uc.js index cd769ba4..52474f55 100644 --- a/JS/miscMods.uc.js +++ b/JS/miscMods.uc.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Misc. Mods -// @version 1.9.1 +// @version 1.9.2 // @author aminomancer // @homepage https://github.com/aminomancer/uc.css.js // @description Various tiny mods not worth making separate scripts for. Read the comments inside the script for details. @@ -398,6 +398,24 @@ this._switcherPanel.openPopup(this._icon); this._switcherTarget.classList.add("active"); }; + + // add an "engine" attribute to the searchbar autocomplete popup, so we can replace the + // engine icon with CSS without needing to use the (random) icon URL as a selector. this + // way, my replacing the built-in Google engine's icon with a nicer-looking one will + // work for everyone. otherwise we'd have problems since the URL is randomly generated + // for everyone. my selector wouldn't work for you. but here, we can make it universal: + // #PopupSearchAutoComplete[engine="Google"] .searchbar-engine-image + // see uc-urlbar.css for the implementation in duskFox. + eval( + `PopupSearchAutoComplete.updateHeader = async function ` + + PopupSearchAutoComplete.updateHeader + .toSource() + .replace(/async updateHeader/, "") + .replace( + /(let uri = engine.iconURI;)/, + `engine.name ? this.setAttribute("engine", engine.name) : this.removeAttribute("engine");\n $1` + ) + ); } } diff --git a/JS/searchSelectionShortcut.uc.js b/JS/searchSelectionShortcut.uc.js index 8a03fc1d..2c78853f 100644 --- a/JS/searchSelectionShortcut.uc.js +++ b/JS/searchSelectionShortcut.uc.js @@ -1,17 +1,53 @@ // ==UserScript== // @name Search Selection Keyboard Shortcut -// @version 1.6.2 +// @version 1.6.3 // @author aminomancer // @homepage https://github.com/aminomancer -// @description Adds a new keyboard shortcut (Ctrl+Shift+F) that searches your default search engine for whatever text you currently have highlighted. This does basically the same thing as the context menu option "Search {Engine} for {Selection}" except that if you highlight a URL, instead of searching for the selection it will navigate directly to the URL. -// Optionally, you can also configure the script to use your other (non-default) search engines as well. The preference "userChrome.searchSelectionShortcut.match-engine-to-current-tab" will add a second hotkey (Ctrl+Alt+F) that will look for an installed engine that matches the current webpage. So if your default search engine is Google but you use the hotkey on Wikipedia, and you have a search engine for Wikipedia installed, it will search Wikipedia for the selected text instead. This preference is disabled by default. -// But what if you have a non-default search engine that you want to use for a particular website? Let's say you're on about:config, browsing through preferences. You highlight a pref name and hit the hotkey to search for it and find out what it does. Normally, pressing the second hotkey will launch your default engine, since about:config doesn't correspond to any normal URL. But by setting the pref "userChrome.searchSelectionShortcut.custom-matches", you can "link" any website to any engine. This pref accepts a JSON formatted object containing zero or more name-value pairs, separated by commas. The object format is {: } -// Here's an example: {"about:config": "Searchfox", "bugzilla.mozilla.org": "searchfox.org", "raw.githubusercontent.com", "https://github.com/search?q=%s"} -// This should basically explain the options. represents a website you might visit, represents the engine to use when you press the hotkey while on the . So the first one means use Searchfox when the hotkey is activated on about:config. This is JSON, so all and values must be wrapped in quotes and the pairs must be separated by commas, or the pref won't work at all. -// A value must be some kind of valid URL. Ideally a host (domain) is best, but it doesn't have to be a host, because some types of URLs lack hosts. If you're unsure what the host is for a website you're trying to link to an engine, open the website in a browser tab, open the content toolbox, and type location.host. For pages that lack hosts or have very specific protocols (like moz-extension:// URLs) you can specify the full page URL, like moz-extension://blahblah/index.html -// An value can be either 1) an engine's name — that's the label that appears next to the search engine in the UI, e.g. "Google"; 2) the domain on which the search engine is hosted, e.g. "www.google.com"; or 3) the engine's full search template URL, or something close to it, e.g. "www.google.com/search?q=%s". Any of these values will work, but using the engine's name is most efficient. -// You can change the hotkey itself (though not the modifiers) by setting "userChrome.searchSelectionShortcut.keycode" to a valid KeyboardEvent code. The default value "KeyF" corresponds to the F key. The correct notation is different for numbers and special characters, so visit https://keycode.info and press the desired key to find its event.code. Then input that string into the pref editor in about:config. -// Since v1.3 this script supports Fission by using JSActors instead of Message Managers. Normally JSActors require multiple files — a parent script and a child script, to communicate between the content frame and the parent process. And to instantiate them would require a third file, the autoconfig script. An autoconfig script requiring multiple additional files doesn't make for a very user-friendly experience. So this script automatically generates its own subscript files in your chrome folder and cleans them up when you quit Firefox. I had a lot of fun figuring this out. If you're trying to learn how to make these kinds of mods, this is a good subject to research since JSActors are really powerful. It's also cool to see how a standalone autoconfig script can be made to create its own little network of temp files to work in a more vanilla-style manner. +// @description Adds a new keyboard shortcut (Ctrl+Shift+F) that searches your default search +// engine for whatever text you currently have highlighted. This does basically the same thing as +// the context menu option "Search {Engine} for {Selection}" except that if you highlight a URL, +// instead of searching for the selection it will navigate directly to the URL. Optionally, you can +// also configure the script to use your other (non-default) search engines as well. The preference +// "userChrome.searchSelectionShortcut.match-engine-to-current-tab" will add a second hotkey +// (Ctrl+Alt+F) that will look for an installed engine that matches the current webpage. So if your +// default search engine is Google but you use the hotkey on Wikipedia, and you have a search engine +// for Wikipedia installed, it will search Wikipedia for the selected text instead. This preference +// is disabled by default. But what if you have a non-default search engine that you want to use for +// a particular website? Let's say you're on about:config, browsing through preferences. You +// highlight a pref name and hit the hotkey to search for it and find out what it does. Normally, +// pressing the second hotkey will launch your default engine, since about:config doesn't correspond +// to any normal URL. But by setting the pref "userChrome.searchSelectionShortcut.custom-matches", +// you can "link" any website to any engine. This pref accepts a JSON formatted object containing +// zero or more name-value pairs, separated by commas. The object format is {: } +// Here's an example: +// {"about:config": "Searchfox", "bugzilla.mozilla.org": "searchfox.org", "raw.githubusercontent.com", "https://github.com/search?q=%s"} +// This should basically explain the options. represents a website you might visit, +// represents the engine to use when you press the hotkey while on the . So the first one +// means use Searchfox when the hotkey is activated on about:config. This is JSON, so all and +// values must be wrapped in quotes and the pairs must be separated by commas, or the pref +// won't work at all. A value must be some kind of valid URL. Ideally a host (domain) is +// best, but it doesn't have to be a host, because some types of URLs lack hosts. If you're unsure +// what the host is for a website you're trying to link to an engine, open the website in a browser +// tab, open the content toolbox, and type location.host. For pages that lack hosts or have very +// specific protocols (like moz-extension:// URLs) you can specify the full page URL, like +// moz-extension://blahblah/index.html An value can be either 1) an engine's name — that's +// the label that appears next to the search engine in the UI, e.g. "Google"; 2) the domain on which +// the search engine is hosted, e.g. "www.google.com"; or 3) the engine's full search template URL, +// or something close to it, e.g. "www.google.com/search?q=%s". Any of these values will work, but +// using the engine's name is most efficient. You can change the hotkey itself (though not the +// modifiers) by setting "userChrome.searchSelectionShortcut.keycode" to a valid KeyboardEvent code. +// The default value "KeyF" corresponds to the F key. The correct notation is different for numbers +// and special characters, so visit https://keycode.info and press the desired key to find its +// event.code. Then input that string into the pref editor in about:config. Since v1.3 this script +// supports Fission by using JSActors instead of Message Managers. Normally JSActors require +// multiple files — a parent script and a child script, to communicate between the content frame and +// the parent process. And to instantiate them would require a third file, the autoconfig script. An +// autoconfig script requiring multiple additional files doesn't make for a very user-friendly +// experience. So this script automatically generates its own subscript files in your chrome folder +// and cleans them up when you quit Firefox. I had a lot of fun figuring this out. If you're trying +// to learn how to make these kinds of mods, this is a good subject to research since JSActors are +// really powerful. It's also cool to see how a standalone autoconfig script can be made to create +// its own little network of temp files to work in a more vanilla-style manner. // @license This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. // @include main // @onlyonce @@ -39,8 +75,8 @@ class SearchSelectionShortcut { } SearchSelectionShortcut.prefs.forEach((def, name) => { let type; - // determine the pref type (boolean, number, string). - // there are a couple more but we won't ever use them. + // determine the pref type (boolean, number, string). there are a couple more but we + // won't ever use them. switch (typeof def) { case "boolean": type = "Bool"; @@ -60,9 +96,8 @@ class SearchSelectionShortcut { firstRun = name !== "userChrome.searchSelectionShortcut.custom-matches"; } }); - // if it's the first time installing v1.6, - // make a splash menu to reveal the new prefs - // and offer an affordance to change them. + // if it's the first time installing v1.6, make a splash menu to reveal the new prefs and + // offer an affordance to change them. if (firstRun) { if (gBrowserInit?.delayedStartupFinished) this.handleSplash(); else Services.obs.addObserver(this, "browser-delayed-startup-finished"); @@ -72,13 +107,14 @@ class SearchSelectionShortcut { // the component registrar — this is the interface that lets us make custom URIs with chrome:// protocols. const registrar = Components.manager.QueryInterface(Ci.nsIComponentRegistrar); // a temp directory we're making in the chrome folder. - // I tried making this folder in the *actual* Temp directory, but I guess it has a permissions issue or something. - // when we try that, the hotkey works on system pages, but not on regular webpages. very strange, never figured out why. - // so just make it a dotfile so it won't get in the way. that should hide the folder on linux unless showing hidden files is enabled. - // not sure about macOS. somebody let me know if it's hidden or not. + // I tried making this folder in the *actual* Temp directory, but I guess it has a + // permissions issue or something. when we try that, the hotkey works on system pages, but + // not on regular webpages. very strange, never figured out why. so just make it a dotfile + // so it won't get in the way. that should hide the folder on linux unless showing hidden + // files is enabled. not sure about macOS. somebody let me know if it's hidden or not. let tempDir = FileUtils.getFile("UChrm", [".SearchSelectionShortcut"]); let { path } = tempDir; - await IOUtils.makeDirectory(path, { ignoreExisting: true }); + await IOUtils.makeDirectory(path, { ignoreExisting: true, createAncestors: false }); // hide the temp dir on windows so it doesn't get in the way of user activities or prevent its eventual deletion. if (AppConstants.platform === "win") { if ("setWindowsAttributes" in IOUtils) @@ -91,13 +127,14 @@ class SearchSelectionShortcut { name: "ucsss", type: "manifest", }); - // JSActors require parent files and child files. see: https://firefox-source-docs.mozilla.org/dom/ipc/jsactors.html - // this parent file listens for messages from the child file. when it gets a message, it triggers a search or link navigation. - // the message includes info about the sender, the page's location and CSP, and the selected text or link. - // if the selected text constitutes a valid link, it will navigate directly to that page. - // otherwise, it will launch a new browser search using the selected text as a query string. - // it will normally open the search/link in a new tab. but if you're currently on your new tab page, - // it assumes you don't want to keep an empty tab around, so it'll open the search/link in the current tab. + // JSActors require parent files and child files. see https://firefox-source-docs.mozilla.org/dom/ipc/jsactors.html + // this parent file listens for messages from the child file. when it gets a message, it + // triggers a search or link navigation. the message includes info about the sender, the + // page's location and CSP, and the selected text or link. if the selected text constitutes + // a valid link, it will navigate directly to that page. otherwise, it will launch a new + // browser search using the selected text as a query string. it will normally open the + // search/link in a new tab. but if you're currently on your new tab page, it assumes you + // don't want to keep an empty tab around, so it'll open the search/link in the current tab. this.parentFile = await this.createTempFile( `"use strict";const EXPORTED_SYMBOLS=["SearchSelectionShortcutParent"];const{Services}=ChromeUtils.import("resource://gre/modules/Services.jsm");const{XPCOMUtils}=ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");XPCOMUtils.defineLazyModuleGetters(this,{BrowserWindowTracker:"resource:///modules/BrowserWindowTracker.jsm",PrivateBrowsingUtils:"resource://gre/modules/PrivateBrowsingUtils.jsm",E10SUtils:"resource://gre/modules/E10SUtils.jsm"});const{WebExtensionPolicy}=Cu.getGlobalForObject(Cu);const schemes=/^http|https|ftp$/;const base=host=>{let domain;try{domain=Services.eTLD.getBaseDomainFromHost(host)}catch(e){}return domain};class SearchSelectionShortcutParent extends JSWindowActorParent{get browser(){return this.browsingContext.top.embedderElement}getEngineTemplate(e){const engineURL=e._getURLOfType("text/html");return engineURL.params.length>0?e._searchForm:engineURL.template}async getMatchingEngine(match,url,host,check=true){if(!match)return null;let preferred;let uri=Services.io.newURI(url);if(check){if(url in CUSTOM_MATCHES)preferred=CUSTOM_MATCHES[url];if(!preferred&&host in CUSTOM_MATCHES)preferred=CUSTOM_MATCHES[host];if(!preferred&&!host){try{preferred=CUSTOM_MATCHES[uri.prePath+uri.filePath]}catch(e){}}if(preferred){const engine=Services.search.getEngineByName(preferred);if(engine&&!engine.hidden)return engine}}const visibleEngines=await Services.search.getVisibleEngines();let originalHost;if(preferred&&/.+\\..+/.test(preferred)){originalHost=host;host=preferred}let engines=visibleEngines.filter((engine=>engine.getResultDomain()==host));if(!engines.length){const baseHost=base(host);if(baseHost||!preferred)engines=visibleEngines.filter((engine=>base(engine.getResultDomain())==baseHost))}if(originalHost&&!engines.length){try{const fixup=Services.uriFixup.getFixupURIInfo(preferred,Ci.nsIURIFixup.FIXUP_FLAG_FIX_SCHEME_TYPOS);uri=fixup.fixedURI;engines=visibleEngines.filter((engine=>engine.getResultDomain()==uri.host))}catch(e){}if(!engines.length)return this.getMatchingEngine(match,url,originalHost,false)}if(engines.length>1){engines.sort(((a,b)=>{const uriA=Services.io.newURI(this.getEngineTemplate(a)),uriB=Services.io.newURI(this.getEngineTemplate(b)),cmnA=this.commonLength(uri,uriA),cmnB=this.commonLength(uri,uriB);return cmnB.host-cmnA.host||cmnB.path-cmnA.path||cmnB.query-cmnA.query}))}return engines[0]}commonLength(x,y){if(!(x?.spec&&y?.spec))return 0;let xh="",yh="";try{xh=x.host}catch(e){}try{yh=y.host}catch(e){}let xf=x.filePath,yf=y.filePath,xs=x.scheme,ys=y.scheme||"https",xq=x.query,yq=y.query,i=0,k=0,len=xh.length,sq="";if(xs!=ys&&!(schemes.test(xs)&&schemes.test(ys)))return 0;while(k{if(p.endsWith("{searchTerms}")){qp=p.replace(/{searchTerms}/,"");return}return true}));xa=xa.filter((p=>!(qp&&p.startsWith(qp))));sq=xa.filter((p=>ya.includes(p)))}return{host:xh.substring(len-k,len).length,path:xf.substring(0,i).length,query:sq.length}}stripURLPrefix(str){const match=/^[a-z]+:(?:\\/){0,2}/i.exec(str);if(!match)return["",str];let prefix=match[0];if(prefix.lengthJSON.parse(val)));`, { name: "SearchSelectionShortcutParent", type: "jsm" } @@ -106,7 +143,7 @@ class SearchSelectionShortcut { // and if text is selected within the actor's frame at the time the hotkey is pressed, // it will send a message containing the aforementioned properties back up to the parent actor. this.childFile = await this.createTempFile( - `"use strict";const EXPORTED_SYMBOLS=["SearchSelectionShortcutChild"];const{Services}=ChromeUtils.import("resource://gre/modules/Services.jsm");const{XPCOMUtils}=ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");XPCOMUtils.defineLazyModuleGetters(this,{SelectionUtils:"resource://gre/modules/SelectionUtils.jsm",E10SUtils:"resource://gre/modules/E10SUtils.jsm",WebNavigationFrames:"resource://gre/modules/WebNavigationFrames.jsm"});class SearchSelectionShortcutChild extends JSWindowActorChild{getKeyState(e){if(e.code!==KEYCODE||e.repeat)return false;const alt=e.getModifierState("Alt");const shift=e.getModifierState("Shift");if(e.getModifierState("Accel")){if(MATCH_ENGINE_TO_TAB&&!shift&&alt)return"match";if(shift&&!alt)return"default"}return false}handleEvent(e){let match=false;switch(this.getKeyState(e)){case"default":break;case"match":match=true;break;default:return}const doc=e.composedTarget.ownerDocument,selection=SelectionUtils.getSelectionDetails(this.contentWindow,8192);if(!selection?.text||selection?.docSelectionIsCollapsed)return;let msg={csp:E10SUtils.serializeCSP(doc.csp),referrerInfo:E10SUtils.serializeReferrerInfo(doc.referrerInfo),text:selection.text,locationURL:this.contentWindow.location.href,locationHost:this.contentWindow.location.hostname,frameID:WebNavigationFrames.getFrameId(doc.defaultView),match};this.sendAsyncMessage("ctrl-shift-f",msg);e.stopPropagation();e.stopImmediatePropagation();e.preventDefault()}}XPCOMUtils.defineLazyPreferenceGetter(this,"KEYCODE","userChrome.searchSelectionShortcut.keycode","KeyF");XPCOMUtils.defineLazyPreferenceGetter(this,"MATCH_ENGINE_TO_TAB","userChrome.searchSelectionShortcut.match-engine-to-current-tab",false);`, + `"use strict";const EXPORTED_SYMBOLS=["SearchSelectionShortcutChild"];const{Services}=ChromeUtils.import("resource://gre/modules/Services.jsm");const{XPCOMUtils}=ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");XPCOMUtils.defineLazyModuleGetters(this,{SelectionUtils:"resource://gre/modules/SelectionUtils.jsm",E10SUtils:"resource://gre/modules/E10SUtils.jsm",WebNavigationFrames:"resource://gre/modules/WebNavigationFrames.jsm"});class SearchSelectionShortcutChild extends JSWindowActorChild{getKeyState(e){if(e.code!==KEYCODE||e.repeat)return false;const alt=e.getModifierState("Alt");const shift=e.getModifierState("Shift");if(e.getModifierState("Accel")){if(MATCH_ENGINE_TO_TAB&&!shift&&alt)return"match";if(shift&&!alt)return"default"}return false}handleEvent(e){let match=false;switch(this.getKeyState(e)){case"default":break;case"match":match=true;break;default:return}const doc=e.composedTarget.ownerDocument,selection=SelectionUtils.getSelectionDetails(this.contentWindow,8192);if(!selection?.text||selection?.docSelectionIsCollapsed)return;let msg={csp:E10SUtils.serializeCSP(doc.csp),referrerInfo:E10SUtils.serializeReferrerInfo(doc.referrerInfo),text:selection.text,locationURL:this.contentWindow.location.href,locationHost:this.contentWindow.location.hostname,frameID:WebNavigationFrames.getFrameId(doc.defaultView),match};this.sendAsyncMessage("SearchSelectionKeydown",msg);e.stopPropagation();e.stopImmediatePropagation();e.preventDefault()}}XPCOMUtils.defineLazyPreferenceGetter(this,"KEYCODE","userChrome.searchSelectionShortcut.keycode","KeyF");XPCOMUtils.defineLazyPreferenceGetter(this,"MATCH_ENGINE_TO_TAB","userChrome.searchSelectionShortcut.match-engine-to-current-tab",false);`, { name: "SearchSelectionShortcutChild", type: "jsm" } ); @@ -118,10 +155,11 @@ class SearchSelectionShortcut { // registering the manifest gives the temp folder a chrome:// URI that we can reference below if (manifest.exists()) registrar.autoRegister(manifest); else return; - // register the JSActor, passing the temporary files' chrome:// URLs. - // includeChrome, allFrames, and messageManagerGroups are specified to ensure this works in every frame. - // this means it'll work on ANY page in ANY browser. it will even work in addon pages loaded in webextension popup panels. - // for example if you open the uBlock Origin popup from its toolbar button and select some text, the hotkey will search for it in a new tab. + // register the JSActor, passing the temporary files' chrome:// URLs. includeChrome, + // allFrames, and messageManagerGroups are specified to ensure this works in every frame. + // this means it'll work on ANY page in ANY browser. it will even work in addon pages loaded + // in webextension popup panels. for example if you open the uBlock Origin popup from its + // toolbar button and select some text, the hotkey will search for it in a new tab. ChromeUtils.registerWindowActor("SearchSelectionShortcut", { parent: { moduleURI: this.parentFile.url, diff --git a/JS/urlbarMods.uc.js b/JS/urlbarMods.uc.js index fb2ecdb2..3a90dda7 100644 --- a/JS/urlbarMods.uc.js +++ b/JS/urlbarMods.uc.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Urlbar Mods -// @version 1.5.8 +// @version 1.5.9 // @author aminomancer // @homepage https://github.com/aminomancer/uc.css.js // @description Make some minor modifications to the urlbar. See the code comments below for more details. @@ -58,19 +58,22 @@ class UrlbarMods { // other error pages — with the triangular warning sign. "add new tooltips and classes for identity icon": true, - // my theme increases the prominence of the "type icon" in urlbar results. for bookmarks, - // this is a star. for open tabs, it's a tab icon. for remote tabs, aka synced tabs, it's a - // sync icon. with this option enabled, however, instead of showing a sync icon it will show - // a device icon specific to the type of device. so if the tab was synced from a cell phone, - // the type icon will show a phone. if it was synced from a laptop, it'll show a laptop, - // etc. the script will add some CSS to set the icons, but it won't change the way type - // icons are layed out. that's particular to my theme and it's purely a CSS issue, so I - // don't want the script to get involved in that. my urlbar-results.css file makes the type - // icon look basically like a 2nd favicon. it goes next to the favicon, rather than - // displaying on top of it. the script's CSS just changes the icon, so it'll fit with - // however you have type icons styled. if you don't use my theme but you want type icons to - // look more prominent, see urlbar-results.css and search "type-icon" - "show device icon in remote tab urlbar results": true, + // this sets attributes on each urlbar result according to 1) its corresponding search + // engine; and 2) its source device, if it's a remote tab. this allows CSS to give them + // unique icons, or to replace a search engine urlbar result's icon. my theme increases the + // prominence of the "type icon" in urlbar results. for bookmarks, this is a star. for open + // tabs, it's a tab icon. for remote tabs, aka synced tabs, it's a sync icon. with this + // option enabled, however, instead of showing a sync icon it will show a device icon + // specific to the type of device. so if the tab was synced from a cell phone, the type icon + // will show a phone. if it was synced from a laptop, it'll show a laptop, etc. the script + // will add some CSS to set the icons, but it won't change the way type icons are layed out. + // that's particular to my theme and it's purely a CSS issue, so I don't want the script to + // get involved in that. my urlbar-results.css file makes the type icon look basically like + // a 2nd favicon. it goes next to the favicon, rather than displaying on top of it. the + // script's CSS just changes the icon, so it'll fit with however you have type icons styled. + // if you don't use my theme but you want type icons to look more prominent, see + // urlbar-results.css and search "type-icon" + "show detailed icons in urlbar results": true, // normally, when you type something like "firefox install" or "clear cookies" in the // urlbar, it suggests an "intervention" or "tip" which acts as a kind of shortcut to @@ -114,8 +117,8 @@ class UrlbarMods { this.extendIdentityIcons(); if (UrlbarMods.config["style identity icon drag box"]) this.styleIdentityIconDragBox(); if (UrlbarMods.config["restore one-offs context menu"]) this.restoreOneOffsContextMenu(); - if (UrlbarMods.config["show device icon in remote tab urlbar results"]) - this.urlbarResultsDeviceIcon(); + if (UrlbarMods.config["show detailed icons in urlbar results"]) + this.urlbarResultsDetailedIcons(); if (UrlbarMods.config["disable urlbar intervention tips"]) this.disableUrlbarInterventions(); if (UrlbarMods.config["sort urlbar results consistently"]) this.urlbarResultsSorting(); @@ -442,7 +445,7 @@ class UrlbarMods { const oneOffsBase = Object.getPrototypeOf(urlbarOneOffsProto); this.urlbarOneOffs._on_contextmenu = oneOffsBase._on_contextmenu; } - urlbarResultsDeviceIcon() { + urlbarResultsDetailedIcons() { XPCOMUtils.defineLazyPreferenceGetter( this, "showRemoteIconsPref", @@ -488,11 +491,19 @@ class UrlbarMods { gURLBar.view._updateRow .toSource() .replace( - /(item\.removeAttribute\(\"stale\"\)\;)/, - `$1 item.removeAttribute("clientType");` + /(item\.removeAttribute\(\"stale\"\);)/, + `$1 item.removeAttribute("clientType"); item.removeAttribute("engine");` ) .replace( - /(item\.setAttribute\(\"type\"\, \"remotetab\"\)\;)/, + /(item\.setAttribute\(\"type\", \"search\"\);)/, + `$1 if (result.payload.engine) item.setAttribute("engine", result.payload.engine);` + ) + .replace( + /(item\.setAttribute\(\"type\", \"TabToSearch\"\);)/, + `$1 if (result.payload.engine) item.setAttribute("engine", result.payload.engine);` + ) + .replace( + /(item\.setAttribute\(\"type\"\, \"remotetab\"\);)/, `$1 if (result.payload.clientType) item.setAttribute("clientType", result.payload.clientType);` ) ); diff --git a/README.md b/README.md index 1cac0e6a..7662070e 100644 --- a/README.md +++ b/README.md @@ -246,7 +246,7 @@ I've bundled some of my addons in this repo as well. They are in the [extensions `userChrome.css` doesn't require any fonts, but there's an optional preference in about:config which lets you replace fonts in the UI (not in-content) with [SF Pro](https://developer.apple.com/fonts), macOS's system font, on Windows or Linux. You can enable this by [downloading the font](https://devimages-cdn.apple.com/design/resources/download/SF-Pro.dmg) and opening it in 7-Zip. From here, double click the `.pkg` file, then `Payload~`, then `.`, `Library`, and `Fonts`. From here you can drag all the files to a working folder, select all of them, then right click and click "Install for all users." -After that, you just need to toggle `userChrome.css.mac-ui-fonts` to `true` in about:config. Currently, this setting requires a local copy of three variants of the font: SF Pro, SF Pro Display, and SF Pro Text (all from [SF-Pro.dmg](https://devimages-cdn.apple.com/design/resources/download/SF-Pro.dmg)). If you use the Arabic abjad, download SF Arabic too since the theme now uses it too. Additionally, `userContent.css` can use [Overpass Mono](https://fonts.google.com/specimen/Overpass+Mono) for plaintext files, if you have it installed. Otherwise it just uses your default monospace font. +After that, you just need to toggle `userChrome.css.mac-ui-fonts` to `true` in about:config. Currently, this setting requires a local copy of three variants of the font: SF Pro, SF Pro Display, and SF Pro Text (all from [SF-Pro.dmg](https://devimages-cdn.apple.com/design/resources/download/SF-Pro.dmg)). If you use the Arabic abjad, download SF Arabic too since the theme now uses it too. Additionally, `userContent.css` can use [Fira Code](https://github.com/tonsky/FiraCode) or [SF Mono](https://developer.apple.com/fonts/) for plaintext files, if you have one of them installed. Otherwise it just uses your default monospace font. I'd recommend Fira Code. @@ -679,6 +679,16 @@ Each extension gets its own button in the panel. Clicking an extension's button +#### [Extension Stylesheet Loader](/JS/extensionStylesheetLoader.uc.js): + +✨ This script is required if you want my "dark mode" themes for various addons like uBlock Origin, Dark Reader, etc. It allows loading CSS rules in addon documents based on ID (which is static), rather than by addon URL (which is random).
💬 More details... + +Normally if you want to style an addon's docs with userContent.css, you need to use `@-moz-document url("moz-extension://c1ea5f85-7682-4d41-86cf-4946657a712e/popup.html")` to avoid styling unintended documents. But this isn't ideal since that URL is generated randomly when you install the addon. It's unique for every installation for every user. So if you have been using duskFox, you've been downloading my extension stylesheets even though they don't work on your installation. Well, no longer! + +Now we can style an addon like this: `:root[uc-extension-id="uBlock0@raymondhill.net"] body {...}` and the stylesheet will work for everyone who has uBlock Origin, out of the box. That means when you use duskFox you'll get all my addon content themes too. And it also means you can use this method in your own [custom-content.css](/resources/in-content/custom-content.css) file. You just need to find the extension's ID, either via my [Debug Extension in Toolbar Context Menu](#debug-extension-in-toolbar-context-menu) script or by locating the extension in `about:debugging#/runtime/this-firefox`. + +For other Firefox modders and theme developers, you can use this script to distribute your addon content themes and ensure they work on your users' installations. It will work in all places where addons can display their content, namely popups and sidebars. Just direct your users to download [fx-autoconfig](https://github.com/MrOtherGuy/fx-autoconfig) and this script, and then, instead of using `@-moz-document`, use `:root[uc-extension-id="example@author"]`. See one of my [addon stylesheets](/resources/in-content/ext-containers.css) for example. +
#### [Eyedropper Button](/JS/eyedropperButton.uc.js): diff --git a/resources/in-content/ext-bitwarden.css b/resources/in-content/ext-bitwarden.css index 6eb8a5f3..b7f33051 100644 --- a/resources/in-content/ext-bitwarden.css +++ b/resources/in-content/ext-bitwarden.css @@ -4,7 +4,7 @@ * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */ -/* bitwarden */ +/* bitwarden. requires extensionStylesheetLoader.uc.js */ iframe#bit-notification-bar-iframe[src^="moz-extension://"] { @@ -12,28 +12,28 @@ iframe#bit-notification-bar-iframe[src^="moz-extension://"] box-shadow: 0 3px 8px hsla(0, 0%, 0%, 0.1), 0 0 2px hsla(0, 0%, 0%, 0.3) !important; } -@-moz-document url-prefix("moz-extension://c1ea5f85-7682-4d41-86cf-4946657a717e/popup/index.html") +@-moz-document regexp("^moz-extension://.*/popup/index.html.*") { @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - body, - input { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] + :where(body, input, button) { font-family: SF Pro, SF Arabic, Segoe UI, sans-serif !important; } - header .search .fa { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] header .search .fa { top: 14px !important; } } } -@-moz-document url-prefix("moz-extension://c1ea5f85-7682-4d41-86cf-4946657a717e/notification/bar.html") +@-moz-document regexp("^moz-extension://.*/notification/bar.html.*") { - body { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] body { background: var(--in-content-box-background) !important; color: var(--plaintext-color) !important; } - .outer-wrapper { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] .outer-wrapper { padding-inline: 8px !important; grid-template-columns: max-content auto max-content !important; grid-column-gap: 8px !important; @@ -41,39 +41,41 @@ iframe#bit-notification-bar-iframe[src^="moz-extension://"] border: none !important; } - .add-text { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] .add-text { user-select: none; } - .add-buttons { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] .add-buttons { display: flex; flex-flow: row nowrap; gap: 8px; margin-inline: 16px !important; } - .add-buttons .link { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] .add-buttons .link { padding: 4px !important; } - button.link, - button.neutral { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] + :where(button.link, button.neutral) { color: var(--in-content-link-color) !important; } - button:not(.neutral, .link) { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] button:not(.neutral, .link) { background-color: var(--in-content-primary-button-background) !important; } - button:not(.neutral, .link):hover { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] + button:not(.neutral, .link):hover { background-color: var(--in-content-primary-button-background-hover) !important; } - button:not(.neutral, .link):hover:active { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] + button:not(.neutral, .link):hover:active { background-color: var(--in-content-primary-button-background-active) !important; } - #logo-link::before { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #logo-link::before { content: ""; display: block; width: 26px; @@ -85,35 +87,35 @@ iframe#bit-notification-bar-iframe[src^="moz-extension://"] border-radius: var(--general-button-border-radius); } - #logo-link { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #logo-link { display: block !important; margin-inline: 0 2px !important; color: var(--in-content-primary-button-background-active) !important; } - #logo-link:hover { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #logo-link:hover { color: var(--in-content-primary-button-background-hover) !important; } - #logo-link:hover:active { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #logo-link:hover:active { color: var(--in-content-primary-button-background) !important; } - #logo-link img#logo { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #logo-link img#logo { display: none !important; } - #close-button { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #close-button { padding: 5px !important; float: right !important; fill-opacity: 0.6; } - #close-button #close { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #close-button #close { display: none !important; } - #close-button::before { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #close-button::before { content: ""; background: url(chrome://userchrome/content/close.svg) center/contain no-repeat !important; width: 20px; @@ -124,7 +126,7 @@ iframe#bit-notification-bar-iframe[src^="moz-extension://"] color: var(--plaintext-color); } - #close-button:hover { + :root[uc-extension-id="{446900e4-71c2-419f-a6a7-df9c091e268b}"] #close-button:hover { fill-opacity: 1; } } diff --git a/resources/in-content/ext-containers.css b/resources/in-content/ext-containers.css index 19c42bc0..a0993fd2 100644 --- a/resources/in-content/ext-containers.css +++ b/resources/in-content/ext-containers.css @@ -6,25 +6,25 @@ /* firefox multi-account containers extension */ -@-moz-document url-prefix("moz-extension://14960f03-eca3-472b-b4d2-0b7f831ebe41/pageActionPopup.html") +@-moz-document regexp("^moz-extension://.*/pageActionPopup.html.*") { - :root { + :root[uc-extension-id="@testpilot-containers"] { background-color: var(--uc-arrowpanel-background) !important; font-size: 12px !important; color: var(--uc-arrowpanel-color) !important; letter-spacing: 0 !important; } - svg:root { + svg:root[uc-extension-id="@testpilot-containers"] { background: none !important; } - html, - body { + html:root[uc-extension-id="@testpilot-containers"], + :root[uc-extension-id="@testpilot-containers"] body { min-block-size: 0 !important; } - body { + :root[uc-extension-id="@testpilot-containers"] body { --hr-grey: var(--uc-desaturate-dimmed) !important; font-size: 12px !important; color: inherit !important; @@ -38,7 +38,7 @@ background: none !important; } - h3.title { + :root[uc-extension-id="@testpilot-containers"] h3.title { padding-block: 8px 4px !important; block-size: 40px !important; min-height: 40px !important; @@ -53,22 +53,22 @@ letter-spacing: inherit !important; } - hr { + :root[uc-extension-id="@testpilot-containers"] hr { padding: 0 !important; margin: var(--menupopup-inner-padding) !important; } - .scrollable, - .identities-list { + :root[uc-extension-id="@testpilot-containers"] .scrollable, + :root[uc-extension-id="@testpilot-containers"] .identities-list { margin: 0 !important; padding: 0 !important; } - .menu { + :root[uc-extension-id="@testpilot-containers"] .menu { padding-block: revert !important; } - .menu-item { + :root[uc-extension-id="@testpilot-containers"] .menu-item { cursor: default !important; border-radius: var(--context-menuitem-border-radius) !important; inline-size: unset !important; @@ -79,43 +79,45 @@ user-select: none !important; } - .controller, - .hover-highlight { + :root[uc-extension-id="@testpilot-containers"] .controller, + :root[uc-extension-id="@testpilot-containers"] .hover-highlight { transition: none !important; } - .hover-highlight:is(:focus):not(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] + .hover-highlight:is(:focus):not(:hover, :focus-visible) { background: revert !important; color: inherit !important; } - .hover-highlight:is(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] .hover-highlight:is(:hover, :focus-visible) { color: inherit !important; background: var(--uc-arrowpanel-dimmed) !important; } - .hover-highlight:is(:hover, :focus-visible):active { + :root[uc-extension-id="@testpilot-containers"] + .hover-highlight:is(:hover, :focus-visible):active { background: var(--uc-arrowpanel-dimmed-further) !important; } - .menu-item td { + :root[uc-extension-id="@testpilot-containers"] .menu-item td { align-items: center !important; overflow: clip !important; } - .menu-icon { + :root[uc-extension-id="@testpilot-containers"] .menu-icon { margin: 0 !important; margin-inline: 6px 8px !important; inline-size: 16px !important; } @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - body { + :root[uc-extension-id="@testpilot-containers"] body { font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; font-kerning: normal !important; } - h3.title { + :root[uc-extension-id="@testpilot-containers"] h3.title { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; font-kerning: normal !important; font-size: 1.1em !important; @@ -124,9 +126,9 @@ } } -@-moz-document url-prefix("moz-extension://14960f03-eca3-472b-b4d2-0b7f831ebe41/popup.html") +@-moz-document regexp("^moz-extension://.*/popup.html.*") { - :root { + :root[uc-extension-id="@testpilot-containers"] { background-color: var(--uc-arrowpanel-background) !important; font-size: 12px !important; color: var(--uc-arrowpanel-color) !important; @@ -134,16 +136,16 @@ scrollbar-width: none !important; } - svg:root { + svg:root[uc-extension-id="@testpilot-containers"] { background: none !important; } - html, - body { + html[uc-extension-id="@testpilot-containers"], + :root[uc-extension-id="@testpilot-containers"] body { min-block-size: 0 !important; } - body { + :root[uc-extension-id="@testpilot-containers"] body { --hr-grey: var(--uc-desaturate-dimmed) !important; --text-grey: var(--uc-arrowpanel-color) !important; font-size: 12px !important; @@ -152,11 +154,11 @@ background: none !important; } - div { + :root[uc-extension-id="@testpilot-containers"] div { user-select: none; } - input[type="text"] { + :root[uc-extension-id="@testpilot-containers"] input[type="text"] { background-color: var(--uc-desaturate-faint) !important; border-color: var(--uc-desaturate-dimmed) !important; min-height: var(--subviewbutton-height) !important; @@ -166,18 +168,17 @@ padding-block: 0 !important; } - .edit-container-panel input[type="text"] { + :root[uc-extension-id="@testpilot-containers"] .edit-container-panel input[type="text"] { margin-inline: 2px !important; } - :focus-visible, - :-moz-focusring, - :focus + label { + :root[uc-extension-id="@testpilot-containers"] + :where(:focus-visible, :-moz-focusring, :focus + label) { outline: none !important; box-shadow: none !important; } - input[type="text"]:focus-visible { + :root[uc-extension-id="@testpilot-containers"] input[type="text"]:focus-visible { border-color: transparent !important; outline-style: solid !important; outline-width: 1.5px !important; @@ -185,7 +186,7 @@ box-shadow: 0 0 0 3.5px var(--in-parent-border-active-shadow); } - input[type="checkbox"] { + :root[uc-extension-id="@testpilot-containers"] input[type="checkbox"] { appearance: none !important; min-width: 10px !important; min-height: 10px !important; @@ -204,30 +205,34 @@ background-color: var(--uc-arrowpanel-faint) !important; } - input[type="checkbox"]:is(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] + input[type="checkbox"]:is(:hover, :focus-visible) { background-color: var(--uc-arrowpanel-dimmed) !important; } - input[type="checkbox"]:is(:hover, :focus-visible):active { + :root[uc-extension-id="@testpilot-containers"] + input[type="checkbox"]:is(:hover, :focus-visible):active { background-color: var(--uc-arrowpanel-dimmed-further) !important; } - input[type="checkbox"]:is([checked="true"], :checked) { + :root[uc-extension-id="@testpilot-containers"] + input[type="checkbox"]:is([checked="true"], :checked) { background-image: url(chrome://userchrome/content/check.svg) !important; border-color: var(--uc-checkbox-checked-border-color) !important; background-color: var(--uc-checkbox-checked-bgcolor) !important; } - input[type="checkbox"]:is([checked="true"], :checked):is(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] + input[type="checkbox"]:is([checked="true"], :checked):is(:hover, :focus-visible) { background-color: var(--uc-checkbox-checked-hover-bgcolor) !important; } - input[type="checkbox"]:is([checked="true"], :checked):is(:hover, :focus-visible):active { + :root[uc-extension-id="@testpilot-containers"] + input[type="checkbox"]:is([checked="true"], :checked):is(:hover, :focus-visible):active { background-color: var(--uc-checkbox-checked-active-bgcolor) !important; } - h3.title, - .proxy-panel-title { + :root[uc-extension-id="@testpilot-containers"] :where(h3.title, .proxy-panel-title) { background: none !important; padding-block: 8px 4px !important; block-size: 40px !important; @@ -246,7 +251,7 @@ box-shadow: none !important; } - h3.proxy-panel-title { + :root[uc-extension-id="@testpilot-containers"] h3.proxy-panel-title { padding-bottom: calc( ((40px - 1.1em) / 2) + var(--menupopup-inner-padding-magnitude) ) !important; @@ -255,22 +260,22 @@ inline-size: calc(100% - (var(--menupopup-inner-padding-magnitude) * 2)) !important; } - h4 { + :root[uc-extension-id="@testpilot-containers"] h4 { font-weight: 400; font-size: 1.1em !important; } - .sub-header-wrapper { + :root[uc-extension-id="@testpilot-containers"] .sub-header-wrapper { margin: revert !important; color: inherit !important; } - .sub-header { + :root[uc-extension-id="@testpilot-containers"] .sub-header { padding-inline: 10px !important; color: inherit !important; } - .info-icon { + :root[uc-extension-id="@testpilot-containers"] .info-icon { fill-opacity: 0.8; -moz-context-properties: fill, fill-opacity; fill: var(--ui-text-80); @@ -285,20 +290,20 @@ right: 10.5px !important; } - .info-icon:is(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] .info-icon:is(:hover, :focus-visible) { fill-opacity: 1; background-color: var(--uc-arrowpanel-dimmed); } - .info-icon:hover:active { + :root[uc-extension-id="@testpilot-containers"] .info-icon:hover:active { background-color: var(--uc-arrowpanel-dimmed-further); } - .info-icon img { + :root[uc-extension-id="@testpilot-containers"] .info-icon img { display: none; } - .info-icon::before { + :root[uc-extension-id="@testpilot-containers"] .info-icon::before { content: ""; display: block; width: 16px; @@ -309,35 +314,34 @@ background-repeat: no-repeat; } - hr { + :root[uc-extension-id="@testpilot-containers"] hr { margin: var(--menupopup-inner-padding-magnitude) !important; padding-block: 0 !important; } - .panel { + :root[uc-extension-id="@testpilot-containers"] .panel { min-block-size: 0 !important; transition: none !important; background: none !important; } - .scrollable, - .identities-list { + :root[uc-extension-id="@testpilot-containers"] :where(.scrollable, .identities-list) { margin: 0 !important; padding: 0 !important; } - .scrollable { + :root[uc-extension-id="@testpilot-containers"] .scrollable { scrollbar-width: auto !important; } - .identities-list { + :root[uc-extension-id="@testpilot-containers"] .identities-list { margin-inline: var(--menupopup-inner-padding-magnitude) !important; inline-size: unset !important; max-block-size: 600px !important; padding-bottom: var(--menupopup-inner-padding-magnitude) !important; } - table[hidden]:empty { + :root[uc-extension-id="@testpilot-containers"] table[hidden]:empty { display: flex !important; flex-flow: row nowrap !important; height: 20px !important; @@ -347,27 +351,27 @@ color: var(--context-menu-disabled-color) !important; } - table[hidden]:empty::before { + :root[uc-extension-id="@testpilot-containers"] table[hidden]:empty::before { content: "(empty)" !important; } - #edit-container-assignments > .scrollable { + :root[uc-extension-id="@testpilot-containers"] #edit-container-assignments > .scrollable { padding-bottom: var(--menupopup-inner-padding-magnitude) !important; } - #container-panel .identities-list { + :root[uc-extension-id="@testpilot-containers"] #container-panel .identities-list { border-bottom: 1px solid var(--uc-desaturate-dimmed) !important; } - v-padding-hack-footer { + :root[uc-extension-id="@testpilot-containers"] v-padding-hack-footer { display: none !important; } - v-padding-hack-4 { + :root[uc-extension-id="@testpilot-containers"] v-padding-hack-4 { display: none !important; } - .bottom-btn { + :root[uc-extension-id="@testpilot-containers"] .bottom-btn { appearance: none !important; position: relative !important; height: revert !important; @@ -385,14 +389,14 @@ color: inherit !important; } - #manage-containers-link:not([hidden]) { + :root[uc-extension-id="@testpilot-containers"] #manage-containers-link:not([hidden]) { display: flex !important; align-content: center !important; align-items: center !important; padding-inline-start: 0 !important; } - #manage-containers-link::before { + :root[uc-extension-id="@testpilot-containers"] #manage-containers-link::before { content: ""; display: inline-block; width: 16px; @@ -406,11 +410,11 @@ fill: currentColor; } - .menu { + :root[uc-extension-id="@testpilot-containers"] .menu { padding-block: revert !important; } - .menu-item { + :root[uc-extension-id="@testpilot-containers"] .menu-item { cursor: default !important; border-radius: var(--context-menuitem-border-radius) !important; min-height: var(--subviewbutton-height) !important; @@ -425,31 +429,33 @@ overflow: clip !important; } - .identities-list .menu-item { + :root[uc-extension-id="@testpilot-containers"] .identities-list .menu-item { margin-inline: 0 !important; } - .menu-item :is(td, .menu-item-name, .menu-right-float) { + :root[uc-extension-id="@testpilot-containers"] + .menu-item + :is(td, .menu-item-name, .menu-right-float) { align-items: center; } - .hover-highlight:is(:focus):not(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] + .hover-highlight:is(:focus):not(:hover, :focus-visible) { background: revert !important; color: inherit !important; } - .hover-highlight:is(:hover, :focus-visible), - .bottom-btn:is(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] + :is(.hover-highlight, .bottom-btn):is(:hover, :focus-visible) { color: inherit !important; background: var(--uc-arrowpanel-dimmed) !important; } - .hover-highlight:hover:active, - .bottom-btn:hover:active { + :root[uc-extension-id="@testpilot-containers"] :is(.hover-highlight, .bottom-btn):hover:active { background: var(--uc-arrowpanel-dimmed-further) !important; } - .menu-text { + :root[uc-extension-id="@testpilot-containers"] .menu-text { flex-grow: 1 !important; word-break: break-all !important; align-self: start !important; @@ -458,7 +464,7 @@ overflow: hidden !important; } - .menu-icon { + :root[uc-extension-id="@testpilot-containers"] .menu-icon { display: block; margin-inline: 6px 8px !important; margin-block: 0 !important; @@ -469,40 +475,51 @@ -moz-context-properties: fill, fill-opacity; } - .menu-icon img { + :root[uc-extension-id="@testpilot-containers"] .menu-icon img { filter: none !important; } - .menu-icon[src="/img/container-openin-16.svg"] { + :root[uc-extension-id="@testpilot-containers"] .menu-icon[src="/img/container-openin-16.svg"] { padding-left: 16px !important; background-image: url(chrome://userchrome/content/skin/container-go.svg) !important; } - .radio-choice > .radio-container > [type="radio"]:checked + label { + :root[uc-extension-id="@testpilot-containers"] + .radio-choice + > .radio-container + > [type="radio"]:checked + + label { background: var(--uc-arrowpanel-color) !important; } - #edit-container-panel-choose-icon .radio-container:hover .usercontext-icon::before { + :root[uc-extension-id="@testpilot-containers"] + #edit-container-panel-choose-icon + .radio-container:hover + .usercontext-icon::before { fill: inherit !important; } - .radio-container:active .usercontext-icon::before { + :root[uc-extension-id="@testpilot-containers"] + .radio-container:active + .usercontext-icon::before { transform: scale(0.85) !important; } - [data-identity-color="grey"] { + :root[uc-extension-id="@testpilot-containers"] [data-identity-color="grey"] { --identity-icon-color: var(--uc-arrowpanel-color) !important; } - [type="radio"]:checked + [data-identity-color="grey"] { + :root[uc-extension-id="@testpilot-containers"] + [type="radio"]:checked + + [data-identity-color="grey"] { --identity-icon-color: var(--uc-arrowpanel-background) !important; } - .sub-header:empty { + :root[uc-extension-id="@testpilot-containers"] .sub-header:empty { display: none; } - tr > td > .trash-button { + :root[uc-extension-id="@testpilot-containers"] tr > td > .trash-button { visibility: hidden !important; display: block !important; background-image: url(chrome://userchrome/content/close.svg) !important; @@ -517,22 +534,24 @@ margin-block: 0 !important; } - tr:hover > td > .trash-button { + :root[uc-extension-id="@testpilot-containers"] tr:hover > td > .trash-button { visibility: visible !important; } - .menu-icon.hover-highlight:is(:hover, :focus, :focus-visible), - .menu-icon.hover-highlight:is(:hover, :focus, :focus-visible):active { + :root[uc-extension-id="@testpilot-containers"] + .menu-icon.hover-highlight:is(:hover, :focus, :focus-visible), + :root[uc-extension-id="@testpilot-containers"] + .menu-icon.hover-highlight:is(:hover, :focus, :focus-visible):active { background-color: transparent !important; } - .menu-right-float { + :root[uc-extension-id="@testpilot-containers"] .menu-right-float { display: flex; flex-flow: row nowrap; justify-content: end; } - .menu-arrow { + :root[uc-extension-id="@testpilot-containers"] .menu-arrow { padding: 0px !important; margin-right: var(--menu-right-margin) !important; min-width: 0 !important; @@ -543,11 +562,11 @@ fill: currentColor; } - .menu-arrow img { + :root[uc-extension-id="@testpilot-containers"] .menu-arrow img { display: none; } - .menu-arrow::after { + :root[uc-extension-id="@testpilot-containers"] .menu-arrow::after { content: ""; background-image: var(--menu-right-img); background-position: center; @@ -558,17 +577,17 @@ display: block; } - .identities-list .menu-arrow, - #sort-containers-link .menu-arrow { + :root[uc-extension-id="@testpilot-containers"] + :is(.identities-list, #sort-containers-link) + .menu-arrow { display: none !important; } - .controller, - .hover-highlight { + :root[uc-extension-id="@testpilot-containers"] :is(.controller, .hover-highlight) { transition: none !important; } - .btn-return { + :root[uc-extension-id="@testpilot-containers"] .btn-return { background-color: transparent !important; background-image: url(chrome://userchrome/content/menu-arrow-left.svg) !important; background-size: 16px !important; @@ -592,21 +611,23 @@ background-color: transparent; } - .btn-return:is(:hover, :focus-visible, :-moz-focusring) { + :root[uc-extension-id="@testpilot-containers"] + .btn-return:is(:hover, :focus-visible, :-moz-focusring) { background-color: var(--uc-arrowpanel-dimmed) !important; fill-opacity: 0.8; } - .btn-return:is(:hover, :focus-visible, :-moz-focusring):active { + :root[uc-extension-id="@testpilot-containers"] + .btn-return:is(:hover, :focus-visible, :-moz-focusring):active { background-color: var(--uc-arrowpanel-dimmed-further) !important; } - .menu-item td { + :root[uc-extension-id="@testpilot-containers"] .menu-item td { border: none !important; flex-grow: 1; } - .menu-item.drag-over td { + :root[uc-extension-id="@testpilot-containers"] .menu-item.drag-over td { background-image: linear-gradient( 180deg, var(--uc-desaturate-dimmed-even-further) 1.5px, @@ -614,11 +635,11 @@ ) !important; } - .move-button img { + :root[uc-extension-id="@testpilot-containers"] .move-button img { display: none; } - .move-button { + :root[uc-extension-id="@testpilot-containers"] .move-button { background-image: url(chrome://browser/skin/notification-icons/drag-indicator.svg); background-size: 14px var(--subviewbutton-height) !important; background-position: center !important; @@ -629,63 +650,66 @@ height: 16px !important; } - .edit-container-panel legend, - .options-header { + :root[uc-extension-id="@testpilot-containers"] .edit-container-panel legend, + :root[uc-extension-id="@testpilot-containers"] .options-header { margin-block: 0 4px !important; margin-inline: 2px !important; } - .options-header { + :root[uc-extension-id="@testpilot-containers"] .options-header { font-size: 1.1em !important; margin-block: 8px !important; } - fieldset, - .options-header { + :root[uc-extension-id="@testpilot-containers"] :is(fieldset, .options-header) { padding-block-end: 8px !important; } - #edit-container-panel > .edit-form { + :root[uc-extension-id="@testpilot-containers"] #edit-container-panel > .edit-form { padding: calc(var(--menupopup-inner-padding-magnitude) * 2) !important; padding-block: var(--menupopup-inner-padding-magnitude) 2px !important; } - #edit-container-options > .container-options > input[type="checkbox"] { + :root[uc-extension-id="@testpilot-containers"] + #edit-container-options + > .container-options + > input[type="checkbox"] { inset-inline-start: 20px; } - .radio-choice > .radio-container { + :root[uc-extension-id="@testpilot-containers"] .radio-choice > .radio-container { block-size: 28px !important; } - .options-label { + :root[uc-extension-id="@testpilot-containers"] .options-label { cursor: default !important; } - .manage-assigned-sites-list { + :root[uc-extension-id="@testpilot-containers"] .manage-assigned-sites-list { cursor: pointer !important; width: max-content !important; color: var(--in-content-link-color-hover) !important; } - #manage-assigned-sites-list:is(:hover, :focus-visible, :-moz-focusring) { + :root[uc-extension-id="@testpilot-containers"] + #manage-assigned-sites-list:is(:hover, :focus-visible, :-moz-focusring) { text-decoration: underline !important; } - #edit-container-options { + :root[uc-extension-id="@testpilot-containers"] #edit-container-options { padding-block: 4px !important; } - .container-options { + :root[uc-extension-id="@testpilot-containers"] .container-options { margin-inline: 2px 8px !important; } - .switch { + :root[uc-extension-id="@testpilot-containers"] .switch { block-size: 14px !important; inline-size: 28px !important; } - .slider { + :root[uc-extension-id="@testpilot-containers"] .slider { background-color: var(--uc-switch-off-background) !important; border-radius: 14px !important; inset-block-end: 0; @@ -697,15 +721,15 @@ transition: 0.1s ease-in-out; } - .slider:hover { + :root[uc-extension-id="@testpilot-containers"] .slider:hover { background-color: var(--uc-switch-off-hover-background) !important; } - .slider:hover:active { + :root[uc-extension-id="@testpilot-containers"] .slider:hover:active { background-color: var(--uc-switch-off-active-background) !important; } - .slider::before { + :root[uc-extension-id="@testpilot-containers"] .slider::before { background-color: #fff; inset-block-end: 2px !important; block-size: 10px !important; @@ -713,23 +737,23 @@ inline-size: 10px !important; } - input:checked + .slider::before { + :root[uc-extension-id="@testpilot-containers"] input:checked + .slider::before { transform: translateX(14px) !important; } - input:checked + .slider { + :root[uc-extension-id="@testpilot-containers"] input:checked + .slider { background-color: var(--purple-40) !important; } - input:checked + .slider:hover { + :root[uc-extension-id="@testpilot-containers"] input:checked + .slider:hover { background-color: var(--purple-50) !important; } - input:checked + .slider:hover:active { + :root[uc-extension-id="@testpilot-containers"] input:checked + .slider:hover:active { background-color: var(--purple-55) !important; } - .panel-footer { + :root[uc-extension-id="@testpilot-containers"] .panel-footer { padding: calc(var(--menupopup-inner-padding-magnitude) * 2) !important; padding-top: var(--menupopup-inner-padding-magnitude) !important; background: none !important; @@ -738,14 +762,13 @@ column-gap: 4px; } - .alert-text { + :root[uc-extension-id="@testpilot-containers"] .alert-text { font-family: inherit !important; text-align: inherit !important; } - .panel-footer > .button, - .primary-cta, - .delete-btn { + :root[uc-extension-id="@testpilot-containers"] .panel-footer > .button, + :root[uc-extension-id="@testpilot-containers"] :where(.primary-cta, .delete-btn) { appearance: none !important; border-radius: var(--context-menuitem-border-radius) !important; height: revert !important; @@ -763,42 +786,54 @@ box-shadow: none !important; } - .panel-footer > .button:is(:hover, :focus-visible, :-moz-focusring) { + :root[uc-extension-id="@testpilot-containers"] + .panel-footer + > .button:is(:hover, :focus-visible, :-moz-focusring) { background-color: var(--uc-arrowpanel-dimmed) !important; } - .panel-footer > .button:hover:active { + :root[uc-extension-id="@testpilot-containers"] .panel-footer > .button:hover:active { background-color: var(--uc-arrowpanel-dimmed-further) !important; } - .panel-footer > .button.secondary:not([disabled]) { + :root[uc-extension-id="@testpilot-containers"] + .panel-footer + > .button.secondary:not([disabled]) { background-color: transparent !important; border-color: var(--uc-arrowpanel-dimmed) !important; } - .panel-footer > .button.secondary:not([disabled], :active):is(:hover, :focus-visible) { + :root[uc-extension-id="@testpilot-containers"] + .panel-footer + > .button.secondary:not([disabled], :active):is(:hover, :focus-visible) { background-color: var(--uc-arrowpanel-dimmed) !important; border-color: transparent !important; } - .panel-footer > .button.secondary:not([disabled]):is(:hover:active, [open]) { + :root[uc-extension-id="@testpilot-containers"] + .panel-footer + > .button.secondary:not([disabled]):is(:hover:active, [open]) { background-color: var(--uc-arrowpanel-dimmed-further) !important; border-color: transparent !important; } - .panel-footer > .button.primary:is(:hover, :focus-visible, :-moz-focusring), - .primary-cta:is(:hover, :focus-visible, :-moz-focusring), - .advanced-proxy-settings-btn:is(:hover, :focus-visible, :-moz-focusring) { + :root[uc-extension-id="@testpilot-containers"] + .panel-footer + > .button.primary:is(:hover, :focus-visible, :-moz-focusring), + :root[uc-extension-id="@testpilot-containers"] + .primary-cta:is(:hover, :focus-visible, :-moz-focusring), + :root[uc-extension-id="@testpilot-containers"] + .advanced-proxy-settings-btn:is(:hover, :focus-visible, :-moz-focusring) { background-color: var(--in-parent-primary-button-background) !important; } - .panel-footer > .button.primary:hover:active, - .primary-cta:hover:active, - .advanced-proxy-settings-btn:hover:active { + :root[uc-extension-id="@testpilot-containers"] .panel-footer > .button.primary:hover:active, + :root[uc-extension-id="@testpilot-containers"] .primary-cta:hover:active, + :root[uc-extension-id="@testpilot-containers"] .advanced-proxy-settings-btn:hover:active { background-color: var(--in-parent-primary-button-background-hover) !important; } - .delete-btn { + :root[uc-extension-id="@testpilot-containers"] .delete-btn { background-color: hsla(2, 70%, 56%, 45%) !important; margin-block: var(--menupopup-inner-padding-magnitude) calc(var(--menupopup-inner-padding-magnitude) * 2) !important; @@ -810,15 +845,17 @@ block-size: 0 !important; } - .delete-btn:is(:hover, :focus-visible, :-moz-focusring) { + :root[uc-extension-id="@testpilot-containers"] + .delete-btn:is(:hover, :focus-visible, :-moz-focusring) { background-color: hsla(358, 70%, 50%, 85%) !important; } - .delete-btn:is(:hover, :focus-visible, :-moz-focusring):active { + :root[uc-extension-id="@testpilot-containers"] + .delete-btn:is(:hover, :focus-visible, :-moz-focusring):active { background-color: hsl(353, 90%, 50%) !important; } - .panel-content.delete-container-confirm { + :root[uc-extension-id="@testpilot-containers"] .panel-content.delete-container-confirm { padding-block: var(--menupopup-inner-padding-magnitude) 0 !important; padding-inline: 16px 0 !important; display: flex; @@ -826,30 +863,30 @@ row-gap: 8px !important; } - .panel-content.delete-container-confirm > * { + :root[uc-extension-id="@testpilot-containers"] .panel-content.delete-container-confirm > * { padding-block: revert !important; } - #delete-container-tab-warning:empty { + :root[uc-extension-id="@testpilot-containers"] #delete-container-tab-warning:empty { display: none !important; } - .blue-link, - .blue-link span { + :root[uc-extension-id="@testpilot-containers"] .blue-link, + :root[uc-extension-id="@testpilot-containers"] .blue-link span { cursor: pointer !important; color: var(--purple-30) !important; transition: none !important; } - .blue-link:hover, - .blue-link:hover span { + :root[uc-extension-id="@testpilot-containers"] .blue-link:hover, + :root[uc-extension-id="@testpilot-containers"] .blue-link:hover span { color: var(--purple-25) !important; text-decoration: underline !important; transition: none !important; } - .moz-vpn-content, - .moz-vpn-controller-content { + :root[uc-extension-id="@testpilot-containers"] + :is(.moz-vpn-content, .moz-vpn-controller-content) { min-block-size: 0 !important; box-shadow: none !important; border-top: 1px solid var(--hr-grey) !important; @@ -858,12 +895,11 @@ transition: none !important; } - .collapsible-content, - .add-bg-color { + :root[uc-extension-id="@testpilot-containers"] :is(.collapsible-content, .add-bg-color) { background-color: transparent !important; } - .collapsible-content { + :root[uc-extension-id="@testpilot-containers"] .collapsible-content { max-block-size: 0; opacity: 0; visibility: hidden; @@ -871,8 +907,7 @@ transition: none !important; } - .moz-vpn-logo, - .moz-vpn-logotype { + :root[uc-extension-id="@testpilot-containers"] :is(.moz-vpn-logo, .moz-vpn-logotype) { background-image: url("chrome://userchrome/content/material/firefox-vpn.svg") !important; color: inherit !important; font-family: inherit !important; @@ -881,7 +916,7 @@ font-size: 1.1em !important; } - .moz-vpn-cta { + :root[uc-extension-id="@testpilot-containers"] .moz-vpn-cta { block-size: var(--subviewbutton-height) !important; margin-block: 6px 0 !important; margin-inline: calc(var(--menupopup-inner-padding-magnitude) * 2) !important; @@ -889,7 +924,7 @@ line-height: normal !important; } - .advanced-proxy-settings-btn { + :root[uc-extension-id="@testpilot-containers"] .advanced-proxy-settings-btn { appearance: none !important; border-radius: var(--context-menuitem-border-radius) !important; min-height: var(--subviewbutton-height) !important; @@ -911,32 +946,34 @@ background-size: 16px 16px, 9px !important; } - .collapsible-content > .flx-row.flx-space-between { + :root[uc-extension-id="@testpilot-containers"] + .collapsible-content + > .flx-row.flx-space-between { inline-size: calc(100% - ((var(--menupopup-inner-padding-magnitude) * 2) * 2)) !important; padding-block-start: 8px !important; } - .button-wrapper { + :root[uc-extension-id="@testpilot-containers"] .button-wrapper { margin-inline: calc(var(--menupopup-inner-padding-magnitude) * 2) !important; } - .advanced-proxy-panel-content { + :root[uc-extension-id="@testpilot-containers"] .advanced-proxy-panel-content { padding-block: calc(var(--menupopup-inner-padding-magnitude) + 4px) !important; padding-inline: calc(var(--menupopup-inner-padding-magnitude) + 6px) !important; margin-block-start: 48.5px !important; } - .advanced-proxy-input-wrapper { + :root[uc-extension-id="@testpilot-containers"] .advanced-proxy-input-wrapper { margin-block: var(--menupopup-inner-padding-magnitude) !important; } - .apply-to-container { + :root[uc-extension-id="@testpilot-containers"] .apply-to-container { block-size: var(--subviewbutton-height) !important; margin-block: var(--menupopup-inner-padding-magnitude) !important; line-height: normal !important; } - #clear-advanced-proxy-input { + :root[uc-extension-id="@testpilot-containers"] #clear-advanced-proxy-input { inset-inline-end: 6px !important; inset-block-start: 6px !important; background-image: url(chrome://userchrome/content/textbox-clear.svg) !important; @@ -957,11 +994,11 @@ box-sizing: border-box !important; } - #clear-advanced-proxy-input:hover { + :root[uc-extension-id="@testpilot-containers"] #clear-advanced-proxy-input:hover { background-color: var(--uc-arrowpanel-dimmed) !important; } - .proxy-validity { + :root[uc-extension-id="@testpilot-containers"] .proxy-validity { position: absolute; inset-block-start: 30px !important; inset-inline-start: 10px !important; @@ -972,26 +1009,25 @@ padding-inline: 5px !important; } - .proxy-validity::after { + :root[uc-extension-id="@testpilot-containers"] .proxy-validity::after { background-color: var(--warning-icon-background) !important; inset-inline-start: 8px !important; } @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - body { + :root[uc-extension-id="@testpilot-containers"] body { font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; font-kerning: normal !important; } - h3.title, - .proxy-panel-title { + :root[uc-extension-id="@testpilot-containers"] :is(h3.title, .proxy-panel-title) { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; font-kerning: normal !important; font-size: 1.1em !important; font-weight: var(--uc-font-weight-bold, 600) !important; } - h4 { + :root[uc-extension-id="@testpilot-containers"] h4 { font-weight: 500 !important; } } diff --git a/resources/in-content/ext-darkreader.css b/resources/in-content/ext-darkreader.css index 3de10ff5..6f94e281 100644 --- a/resources/in-content/ext-darkreader.css +++ b/resources/in-content/ext-darkreader.css @@ -6,183 +6,169 @@ /* dark reader */ -@-moz-document url-prefix("moz-extension://54964627-cc4e-4a5b-9a5a-bc3c14858102/ui/") +@-moz-document regexp("^moz-extension://.*/ui/.*") { - body, - html, - :root { + :root[uc-extension-id="addon@darkreader.org"] body, + html[uc-extension-id="addon@darkreader.org"], + :root[uc-extension-id="addon@darkreader.org"] { border-color: transparent !important; background-color: var(--tooltip-bgcolor) !important; border-radius: 0 !important; color: var(--uc-content-text-a80) !important; } + :root[uc-extension-id="addon@darkreader.org"], + :root[uc-extension-id="addon@darkreader.org"] * { + scrollbar-color: var(--button-solid-active-background) var(--uc-arrowpanel-dimmed) !important; + } + @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - body, - button, - * { + :root[uc-extension-id="addon@darkreader.org"] * { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif; font-kerning: normal; font-weight: 300; } } - .m-logo { + :root[uc-extension-id="addon@darkreader.org"] .m-logo { background-image: url(chrome://userchrome/content/in-content/darkreader-logo.svg) !important; } - .textbox, - .mobile .automation-page__system-dark-mode__button, - .preview .automation-page__system-dark-mode__button { + :root[uc-extension-id="addon@darkreader.org"] .textbox, + :root[uc-extension-id="addon@darkreader.org"] .automation-page__system-dark-mode__button { color: var(--uc-content-text-a80) !important; } - .page { + :root[uc-extension-id="addon@darkreader.org"] .page { background-color: transparent !important; } - .button, - .multi-switch, - .checkbox, - .m-help-button, - #editor { + :root[uc-extension-id="addon@darkreader.org"] + :where(.button, .multi-switch, .checkbox, .m-help-button, #editor) { background-color: var(--uc-arrowpanel-faint) !important; border-color: var(--uc-panel-button-solid) !important; } - .dropdown__list__item:hover, - .button:hover, - .m-help-button:hover, - .checkbox:hover, - .multi-switch__option:hover:not(.multi-switch__option--selected), - .slider__track, - .slider__track::after, - .mobile .collapsible-panel__group__expand-button, - .preview .collapsible-panel__group__expand-button, - .textbox { + :root[uc-extension-id="addon@darkreader.org"] + :where(.dropdown__list__item, .button, .m-help-button, .checkbox):hover, + :root[uc-extension-id="addon@darkreader.org"] + :where(.multi-switch__option:hover:not(.multi-switch__option--selected), .slider__track, .slider__track::after), + :root[uc-extension-id="addon@darkreader.org"] .collapsible-panel__group__expand-button, + :root[uc-extension-id="addon@darkreader.org"] .textbox { background-color: var(--uc-arrowpanel-dimmed) !important; } - .m-donate-button { + :root[uc-extension-id="addon@darkreader.org"] .m-donate-button { background-color: var(--in-parent-primary-button-background) !important; } - .m-donate-button:hover { + :root[uc-extension-id="addon@darkreader.org"] .m-donate-button:hover { background-color: var(--in-parent-primary-button-background-hover) !important; } - input::placeholder, - .site-toggle:not(.site-toggle--active), - #editor { + :root[uc-extension-id="addon@darkreader.org"] input::placeholder, + :root[uc-extension-id="addon@darkreader.org"] + :where(.site-toggle:not(.site-toggle--active), #editor) { color: var(--uc-content-text-a50) !important; } - .slider__track__fill, - .slider__track::before, - .slider__track__fill::before, - .multi-switch__highlight, - .dropdown__selected, - .textbox:hover, - .textbox:focus, - .mobile .check-button .checkbox__checkmark, - .preview .check-button .checkbox__checkmark { + :root[uc-extension-id="addon@darkreader.org"] + :where(.slider__track, .slider__track__fill)::before, + :root[uc-extension-id="addon@darkreader.org"] + :where(.slider__track__fill, .multi-switch__highlight, .dropdown__selected, .textbox:hover, .textbox:focus), + :root[uc-extension-id="addon@darkreader.org"] .check-button .checkbox__checkmark { background-color: var(--uc-panel-button-solid) !important; } - .site-list__textbox:focus { + :root[uc-extension-id="addon@darkreader.org"] .site-list__textbox:focus { background-color: var(--uc-arrowpanel-dimmed-further) !important; box-shadow: 0 0 0 0.125rem var(--uc-panel-button-solid) !important; } - .mobile .theme-group__presets-wrapper, - .preview .theme-group__presets-wrapper { + :root[uc-extension-id="addon@darkreader.org"] .theme-group__presets-wrapper { background-color: var(--uc-panel-button-solid) !important; border-color: var(--uc-panel-button-solid) !important; } - .theme-group__controls-wrapper, - .theme-group__presets-wrapper::before, - .site-list, - .textbox { + :root[uc-extension-id="addon@darkreader.org"] .theme-group__presets-wrapper::before, + :root[uc-extension-id="addon@darkreader.org"] + :where(.theme-group__controls-wrapper, .site-list, .textbox) { border-color: var(--uc-panel-button-solid) !important; } - .dropdown__list { + :root[uc-extension-id="addon@darkreader.org"] .dropdown__list { background-color: var(--uc-panel-box-solid) !important; border-color: var(--uc-panel-button-solid) !important; } - .dropdown__list__item { + :root[uc-extension-id="addon@darkreader.org"] .dropdown__list__item { background-color: var(--uc-panel-box-solid) !important; } - .mobile .theme-preset-picker .dropdown__list, - .preview .theme-preset-picker .dropdown__list { + :root[uc-extension-id="addon@darkreader.org"] .theme-preset-picker .dropdown__list { border: none; box-shadow: 0 0 0 0.125rem var(--uc-panel-button-solid), 0 0 0.25rem 0.1875rem hsla(0, 0%, 0%, 0.5) !important; } - .color-picker__wrapper { + :root[uc-extension-id="addon@darkreader.org"] .color-picker__wrapper { background-color: transparent !important; } - .color-picker--focused .color-picker__wrapper, - .color-picker--focused .color-picker__input, - .color-picker:hover .color-picker__input { + :root[uc-extension-id="addon@darkreader.org"] .color-picker--focused .color-picker__wrapper, + :root[uc-extension-id="addon@darkreader.org"] .color-picker--focused .color-picker__input, + :root[uc-extension-id="addon@darkreader.org"] .color-picker:hover .color-picker__input { background-color: var(--uc-panel-button-solid) !important; } - .mobile .site-list__item__remove, - .preview .site-list__item__remove { + :root[uc-extension-id="addon@darkreader.org"] .site-list__item__remove { background-image: url(chrome://userchrome/content/in-content/darkreader-close.svg) !important; } - .mobile .site-list__item__remove:hover, - .preview .site-list__item__remove:hover { + :root[uc-extension-id="addon@darkreader.org"] .site-list__item__remove:hover { background-color: var(--uc-arrowpanel-dimmed-even-further) !important; } - .mobile .automation-page__line .checkbox__checkmark, - .preview .automation-page__line .checkbox__checkmark { + :root[uc-extension-id="addon@darkreader.org"] .automation-page__line .checkbox__checkmark { background-image: url(chrome://userchrome/content/in-content/darkreader-check.svg) !important; } - .automation-page::after { + :root[uc-extension-id="addon@darkreader.org"] .automation-page::after { display: none !important; } - .m-donate-description { + :root[uc-extension-id="addon@darkreader.org"] .m-donate-description { display: none !important; } - .m-donate-group { + :root[uc-extension-id="addon@darkreader.org"] .m-donate-group { margin-top: -0.15rem !important; } - .darkreader-version { + :root[uc-extension-id="addon@darkreader.org"] .darkreader-version { opacity: 0.4; margin-bottom: -4px !important; } - .news-section { + :root[uc-extension-id="addon@darkreader.org"] .news-section { background: none !important; } - .news-section__main-link { + :root[uc-extension-id="addon@darkreader.org"] .news-section__main-link { font-weight: initial !important; color: var(--in-content-link-color) !important; } - .news-section__main-link:is(:hover, :focus-visible) { + :root[uc-extension-id="addon@darkreader.org"] + .news-section__main-link:is(:hover, :focus-visible) { color: var(--in-content-link-color-hover) !important; } - .news-section__main-link:active { + :root[uc-extension-id="addon@darkreader.org"] .news-section__main-link:active { color: var(--in-content-link-color-active) !important; } - .m-donate-button__text { + :root[uc-extension-id="addon@darkreader.org"] .m-donate-button__text { transform: none !important; font-style: italic !important; } diff --git a/resources/in-content/ext-firefoxnotes.css b/resources/in-content/ext-firefoxnotes.css index 63383ca6..e734eab9 100644 --- a/resources/in-content/ext-firefoxnotes.css +++ b/resources/in-content/ext-firefoxnotes.css @@ -6,9 +6,9 @@ /* Firefox Notes */ -@-moz-document url-prefix("moz-extension://39126f84-0a86-4457-b922-7be985a9338d/sidebar/index.html") +@-moz-document regexp("^moz-extension://.*/sidebar/index.html.*") { - :root { + :root[uc-extension-id="notes@mozilla.com"] { --main-bg-color: var(--in-content-bg-dark) !important; --main-offset-bg-color: var(--in-content-box-background) !important; --main-bg-hover-color: var(--in-content-button-background-hover) !important; @@ -39,81 +39,79 @@ --ck-font-face: sans-serif !important; } - textarea::selection, - ::selection { + :root[uc-extension-id="notes@mozilla.com"] textarea::selection, + :root[uc-extension-id="notes@mozilla.com"] ::selection { color: var(--content-selection-color) !important; background-color: var(--content-selection-bgcolor) !important; } - textarea:-moz-window-inactive::selection, - :-moz-window-inactive::selection { + :root[uc-extension-id="notes@mozilla.com"] textarea:-moz-window-inactive::selection, + :root[uc-extension-id="notes@mozilla.com"] :-moz-window-inactive::selection { background-color: var(--content-selection-bgcolor-disabled) !important; } - :root, - body, - .ck.ck-reset_all, - .ck.ck-reset_all *, - code { + :root[uc-extension-id="notes@mozilla.com"] + :is(:root, body, .ck.ck-reset_all, .ck.ck-reset_all *, code) { font-family: var(--ck-font-face) !important; } - #notes .ck-editor__editable ul > li, - #notes .ck-editor__editable ol > li { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-editor__editable :is(ul, ol) > li { line-height: 2rem !important; } - header, - #notes .ck-toolbar .ck-button__label, - button, - ::file-selector-button, - input:is([type="reset"], [type="button"], [type="submit"]) { + :root[uc-extension-id="notes@mozilla.com"] header, + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-toolbar .ck-button__label, + :root[uc-extension-id="notes@mozilla.com"] button, + :root[uc-extension-id="notes@mozilla.com"] ::file-selector-button, + :root[uc-extension-id="notes@mozilla.com"] + input:is([type="reset"], [type="button"], [type="submit"]) { font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !important; } - header { + :root[uc-extension-id="notes@mozilla.com"] header { font-size: 16px !important; min-height: 44px !important; } @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - :root, - body { + :root[uc-extension-id="notes@mozilla.com"], + :root[uc-extension-id="notes@mozilla.com"] body { --ck-font-face: SF Pro, SF Arabic, Segoe UI, sans-serif !important; font-kerning: normal !important; } - button, - ::file-selector-button, - input:is([type="reset"], [type="button"], [type="submit"]) { + :root[uc-extension-id="notes@mozilla.com"] button, + :root[uc-extension-id="notes@mozilla.com"] ::file-selector-button, + :root[uc-extension-id="notes@mozilla.com"] + input:is([type="reset"], [type="button"], [type="submit"]) { font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; } - header { + :root[uc-extension-id="notes@mozilla.com"] header { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; } - .listView ul li button p { + :root[uc-extension-id="notes@mozilla.com"] .listView ul li button p { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; font-weight: 300 !important; } - .listView ul li button p strong { + :root[uc-extension-id="notes@mozilla.com"] .listView ul li button p strong { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; font-weight: 500 !important; } } - #notes .ck-editor__editable { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-editor__editable { padding: 4px var(--ck-spacing-standard) !important; background-color: var(--in-content-box-background) !important; } - .listView ul { + :root[uc-extension-id="notes@mozilla.com"] .listView ul { background-color: var(--in-content-box-background) !important; } - #footerButtons { + :root[uc-extension-id="notes@mozilla.com"] #footerButtons { height: auto !important; color: var(--primary-font-color) !important; border-color: var(--border-color) !important; @@ -123,11 +121,11 @@ transition: background var(--sync-animation-duration) cubic-bezier(0.07, 0.95, 0, 1); } - #footerButtons .photon-menu { + :root[uc-extension-id="notes@mozilla.com"] #footerButtons .photon-menu { padding: 0 !important; } - .photon-menu .wrapper ul { + :root[uc-extension-id="notes@mozilla.com"] .photon-menu .wrapper ul { background: var(--in-content-box-background-odd) !important; padding: 6px 0; margin: inherit; @@ -140,32 +138,32 @@ overflow: auto; } - .photon-menu .wrapper ul::before { + :root[uc-extension-id="notes@mozilla.com"] .photon-menu .wrapper ul::before { border-color: var(--solid-border-color-bright) transparent !important; } - .photon-menu .wrapper ul::after { + :root[uc-extension-id="notes@mozilla.com"] .photon-menu .wrapper ul::after { border-color: var(--in-content-box-background-odd) transparent !important; } - .photon-menu ul button { + :root[uc-extension-id="notes@mozilla.com"] .photon-menu ul button { color: inherit !important; } - .photon-menu .wrapper ul { + :root[uc-extension-id="notes@mozilla.com"] .photon-menu .wrapper ul { padding: var(--menupopup-inner-padding-magnitude) !important; } - .photon-menu .wrapper ul li button { + :root[uc-extension-id="notes@mozilla.com"] .photon-menu .wrapper ul li button { border-radius: var(--general-button-border-radius) !important; } - .photon-menu .wrapper ul hr { + :root[uc-extension-id="notes@mozilla.com"] .photon-menu .wrapper ul hr { border-color: var(--solid-border-color) transparent !important; margin-block: var(--menu-separator-margin) !important; } - #notes .ck-heading-dropdown .ck-dropdown__panel { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-heading-dropdown .ck-dropdown__panel { width: auto !important; height: auto !important; color: var(--primary-font-color) !important; @@ -173,72 +171,83 @@ border-radius: var(--menupopup-border-radius) !important; } - #notes .ck-heading-dropdown .ck-dropdown__panel .ck-list { + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-heading-dropdown + .ck-dropdown__panel + .ck-list { width: auto !important; height: auto !important; } - #notes .ck-heading-dropdown .ck-dropdown__panel :where(ul, li) { + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-heading-dropdown + .ck-dropdown__panel + :where(ul, li) { background: none !important; } - .ck.ck-list__item { + :root[uc-extension-id="notes@mozilla.com"] .ck.ck-list__item { min-width: 8em !important; background: none !important; } - #notes .ck-toolbar .ck-list__item:is(:hover, :focus) { + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-toolbar + .ck-list__item:is(:hover, :focus) { background-color: var(--in-content-button-background-hover) !important; } - #notes .ck-toolbar .ck-list__item_active { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-toolbar .ck-list__item_active { background: var(--in-content-button-background-active) !important; color: var(--attention-color) !important; } - #notes .ck-toolbar .ck-list__item_active:is(:hover, :focus) { + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-toolbar + .ck-list__item_active:is(:hover, :focus) { background: var(--in-content-button-background-active) !important; } - #notes .ck-editor__top { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-editor__top { border-bottom: 1px solid var(--in-content-border-hover) !important; height: auto !important; width: auto !important; } - .ck.ck-toolbar { + :root[uc-extension-id="notes@mozilla.com"] .ck.ck-toolbar { padding: 4px !important; } - button.iconBtn, - a.btn.iconBtn { + :root[uc-extension-id="notes@mozilla.com"] :where(button, a.btn).iconBtn { width: var(--ck-ui-component-min-height) !important; height: var(--ck-ui-component-min-height) !important; padding: calc((var(--subviewbutton-height) - 16px) / 2) !important; border-radius: var(--general-button-border-radius) !important; } - header button:hover, - header a:hover, - button.iconBtn:hover { + :root[uc-extension-id="notes@mozilla.com"] header :is(button, a):hover, + :root[uc-extension-id="notes@mozilla.com"] button.iconBtn:hover { background-color: var(--main-bg-hover-color) !important; } - header button:active, - header a:active, - button.iconBtn:active { + :root[uc-extension-id="notes@mozilla.com"] header :is(button, a):active, + :root[uc-extension-id="notes@mozilla.com"] button.iconBtn:active { background-color: var(--main-bg-active-color) !important; } - button { + :root[uc-extension-id="notes@mozilla.com"] button { appearance: none !important; } - .ck.ck-dropdown { + :root[uc-extension-id="notes@mozilla.com"] .ck.ck-dropdown { margin: 0 !important; } - #notes .ck-heading-dropdown button { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-heading-dropdown button { padding: 2px 7px !important; width: auto !important; height: auto !important; @@ -248,19 +257,27 @@ gap: 4px !important; } - .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on { + :root[uc-extension-id="notes@mozilla.com"] + .ck.ck-dropdown + .ck-button.ck-dropdown__button.ck-on { border-radius: var(--general-button-border-radius) !important; } - .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label { + :root[uc-extension-id="notes@mozilla.com"] + .ck.ck-dropdown.ck-heading-dropdown + .ck-dropdown__button + .ck-button__label { width: auto !important; } - .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button.ck-button_with-text .ck-button__label { + :root[uc-extension-id="notes@mozilla.com"] + .ck.ck-dropdown.ck-heading-dropdown + .ck-dropdown__button.ck-button_with-text + .ck-button__label { width: 18px !important; } - #notes .ck-dropdown__arrow { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-dropdown__arrow { width: 12px !important; position: relative !important; right: revert !important; @@ -270,41 +287,51 @@ transform: revert !important; } - #notes .ck-toolbar button.ck-on *, - #notes .ck-toolbar button:active * { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-toolbar button:is(.ck-on, :active) * { color: var(--attention-color) !important; } - #notes .ck-button.ck-on { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-button.ck-on { background: var(--in-content-button-background-hover) !important; } - #notes .ck-toolbar .ck-button:focus:not(.ck-disabled), - #notes .ck-toolbar .ck-button:hover:not(.ck-disabled), - #notes .ck-toolbar a.ck-button:focus:not(.ck-disabled), - #notes .ck-toolbar a.ck-button:hover:not(.ck-disabled) { + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-toolbar + .ck-button:where(:focus, :hover):not(.ck-disabled), + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-toolbar + a.ck-button:where(:focus, :hover):not(.ck-disabled) { background: var(--in-content-button-background-hover) !important; } - #notes .ck-toolbar .ck-dropdown__button:hover:not(.ck-disabled) { + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-toolbar + .ck-dropdown__button:hover:not(.ck-disabled) { background: var(--in-content-button-background-hover) !important; } - #notes .ck-toolbar button .ck-tooltip__text { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-toolbar button .ck-tooltip__text { border: solid thin var(--in-content-border-hover) !important; color: var(--ui-text-90) !important; } - #notes .ck-toolbar .ck-tooltip.ck-tooltip_s .ck-tooltip__text::after { + :root[uc-extension-id="notes@mozilla.com"] + #notes + .ck-toolbar + .ck-tooltip.ck-tooltip_s + .ck-tooltip__text::after { border-color: transparent transparent var(--in-content-border-hover) !important; } - #notes .ck-editor__main a { + :root[uc-extension-id="notes@mozilla.com"] #notes .ck-editor__main a { color: var(--in-content-primary-button-background-active) !important; } - #notes .drag-n-drop-focus, - #notes .drag-n-drop-focus .ck-editor__editable { + :root[uc-extension-id="notes@mozilla.com"] #notes .drag-n-drop-focus, + :root[uc-extension-id="notes@mozilla.com"] #notes .drag-n-drop-focus .ck-editor__editable { border-color: var(--in-content-box-border-color) !important; box-shadow: inset 0 0 0 1px var(--in-content-box-border-color) !important; border: none !important; diff --git a/resources/in-content/ext-mdm.css b/resources/in-content/ext-mdm.css index d6ce8987..469884cf 100644 --- a/resources/in-content/ext-mdm.css +++ b/resources/in-content/ext-mdm.css @@ -6,18 +6,18 @@ /* multithreaded download manager */ -@-moz-document url-prefix("moz-extension://0163b722-07ea-4fbd-80d6-7b5de657bb9e") +@-moz-document regexp("^moz-extension://.*/.*") { - :root { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] { --selected-bg: color-mix(in srgb, hsla(200, 40%, 70%, 0.25) 60%, var(--purple-35)); } - body { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] body { background-color: var(--in-content-page-background) !important; color: var(--in-content-page-color) !important; } - #toolbar { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] #toolbar { background-color: var(--in-content-box-background) !important; display: flex !important; flex-flow: row nowrap !important; @@ -25,35 +25,41 @@ padding: 3px !important; } - #toolbar > button, - .summary-row > button { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] + :is(#toolbar, .summary-row) + > button { background-color: transparent !important; margin: 0 !important; border-radius: var(--general-button-border-radius) !important; outline: 0 !important; } - #toolbar > button:not([disabled]):hover, - .summary-row > button:not([disabled]):hover { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] + :is(#toolbar, .summary-row) + > button:not([disabled]):hover { background-color: var(--in-content-button-background-hover) !important; } - #toolbar > button:not([disabled]):focus-visible, - .summary-row > button:not([disabled]):focus-visible { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] + :is(#toolbar, .summary-row) + > button:not([disabled]):focus-visible { outline: var(--global-focus-ring) !important; box-shadow: var(--global-focus-shadow) !important; } - #toolbar > button:not([disabled]):hover:active, - .summary-row > button:not([disabled]):hover:active { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] + :is(#toolbar, .summary-row) + > button:not([disabled]):hover:active { background-color: var(--in-content-button-background-active) !important; } - #tasks-wrapper { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] #tasks-wrapper { min-height: 100px !important; } - #tasks:empty + #empty-tasks { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] + #tasks:empty + + #empty-tasks { height: 100px !important; display: flex !important; flex-flow: column nowrap !important; @@ -61,20 +67,22 @@ align-content: center !important; } - .task { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] .task { border-color: var(--in-content-box-border-color) !important; } - :root[data-path="panel/panel"] .task.selected { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] + :root[data-path="panel/panel"] + .task.selected { background-color: var(--selected-bg) !important; } - .progress-canvas { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] .progress-canvas { border-radius: 100px !important; } - .warning-bar, - .error-bar { + :root[uc-extension-id="multithreaded-download-manager@qw.linux-2g64.local"] + :is(.warning-bar, .error-bar) { background-color: rgb(22, 21, 22) !important; } } diff --git a/resources/in-content/ext-nordvpn.css b/resources/in-content/ext-nordvpn.css index 449ca301..f5c03fa1 100644 --- a/resources/in-content/ext-nordvpn.css +++ b/resources/in-content/ext-nordvpn.css @@ -6,46 +6,46 @@ /* nord VPN extension */ -@-moz-document url-prefix("moz-extension://54896d1f-a658-4fd5-ab86-4ad739b06f69") +@-moz-document regexp("^moz-extension://.*/.*") { @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - body { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] body { font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; } - .fwm { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .fwm { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; } } - body, - .Container { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] body, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Container { background-color: var(--in-content-page-background) !important; color: var(--in-content-page-color) !important; } - .Container { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Container { min-height: auto !important; } - .Container__wrapper { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Container__wrapper { min-height: 350px !important; } - .c-bw-12, - .CountryItem .Text { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .c-bw-12, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .CountryItem .Text { color: var(--ui-text-80) !important; } - .text-grey-darkest { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .text-grey-darkest { color: var(--ui-text-90) !important; } - .text-black { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .text-black { color: var(--ui-text-100) !important; } - .TopBar .py-5 > .nord-image { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .TopBar .py-5 > .nord-image { stroke: var(--in-content-primary-button-background-hover); fill: var(--in-content-page-color); background-image: url(chrome://userchrome/content/in-content/nordvpn-logo.svg) !important; @@ -55,127 +55,139 @@ -moz-context-properties: fill, stroke; } - .c-bw-14 * { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .c-bw-14 * { fill: var(--ui-text-60) !important; } - .TopBar .Link:hover .SVG--inline:not(.SVG--no-hover) * { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .TopBar + .Link:hover + .SVG--inline:not(.SVG--no-hover) + * { fill: var(--in-content-primary-button-background-hover) !important; } - .Button--small { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Button--small { min-height: 32px !important; } - .Button--blue, - .nord-button--v-contained.nord-button--c-blue { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Button--blue, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .nord-button--v-contained.nord-button--c-blue { background-color: var(--in-content-primary-button-background) !important; border-color: transparent !important; } - .Button--blue:hover, - .nord-button--v-contained.nord-button--c-blue:is(:hover, :focus-visible):not([disabled]) { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Button--blue:hover, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .nord-button--v-contained.nord-button--c-blue:is(:hover, :focus-visible):not([disabled]) { background-color: var(--in-content-primary-button-background-active) !important; border-color: transparent !important; } - .Link--alt, - .text-blue { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] :is(.Link--alt, .text-blue) { color: var(--purple-35) !important; } - .Link--alt.Link--active, - .Link--alt:hover, - .text-blue:hover { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Link--alt.Link--active, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] :is(.Link--alt, .text-blue):hover { color: color-mix(in srgb, var(--attention-color) 50%, var(--purple-30)) !important; } - .c-blu-6, - .c-blu-6 * { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .c-blu-6, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .c-blu-6 * { color: var(--purple-35) !important; fill: var(--purple-35) !important; } - .Link--alt:is(:active, :focus, :hover) .SVG--inline:not(.SVG--no-hover) * { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .Link--alt:is(:active, :focus, :hover) + .SVG--inline:not(.SVG--no-hover) + * { fill: color-mix(in srgb, var(--attention-color) 50%, var(--purple-30)) !important; } - .Link--dark.Link--active, - .Link--dark:hover { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Link--dark:is(.Link--active, :hover) { color: var(--in-content-page-color) !important; } - .CountryItem--active, - .CountryItem:hover { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + :is(.CountryItem--active, .CountryItem:hover) { background: var(--in-content-button-background) !important; } - hr { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] hr { background: none !important; border-bottom: 1px solid var(--in-content-button-background) !important; height: 0 !important; } - .Toggle__track { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Toggle__track { background-color: var(--in-content-button-background-hover) !important; } - .Toggle:hover:not(.Toggle--disabled) .Toggle__track { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .Toggle:hover:not(.Toggle--disabled) + .Toggle__track { background-color: var(--in-content-button-background-active) !important; } - .Toggle__thumb { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Toggle__thumb { background-color: var(--ui-text-80) !important; border-color: transparent !important; background-clip: content-box !important; } - .Toggle:hover:not(.Toggle--disabled) .Toggle__thumb { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .Toggle:hover:not(.Toggle--disabled) + .Toggle__thumb { background-color: var(--ui-text-100) !important; } - .Toggle--checked .Toggle__track { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Toggle--checked .Toggle__track { background-color: var(--in-content-primary-button-background) !important; } - .Toggle--checked:hover:not(.Toggle--disabled) .Toggle__track { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .Toggle--checked:hover:not(.Toggle--disabled) + .Toggle__track { background-color: var(--in-content-primary-button-background-hover) !important; } - .Toggle--checked .Toggle__thumb { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Toggle--checked .Toggle__thumb { background-color: var(--ui-text-100) !important; } - .Button--destructive.Button--outline, - .nord-button.text-red { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Button--destructive.Button--outline, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .nord-button.text-red { border-color: transparent !important; } - .Button--destructive.Button--outline:not(:hover) { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + .Button--destructive.Button--outline:not(:hover) { background-color: var(--in-content-button-background) !important; } - .nord-button.text-red:not(:hover) { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .nord-button.text-red:not(:hover) { background-color: var(--in-content-button-background) !important; } - .nord-button.text-red:hover { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .nord-button.text-red:hover { background-color: var(--in-content-button-background-hover) !important; } - .form-control, - .nord-input { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .form-control, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .nord-input { background-color: var(--in-content-box-background) !important; } - .TextField__element, - .nord-input { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .TextField__element, + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .nord-input { border-color: var(--in-content-box-border-color) !important; } - .form-control:focus, - .TextField__element:focus, - .nord-input:focus { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] + :is(.form-control, .TextField__element, .nord-input):focus { border-color: var(--purple-40) !important; } } diff --git a/resources/in-content/ext-simpletranslate.css b/resources/in-content/ext-simpletranslate.css index d6c11c22..377a9ec7 100644 --- a/resources/in-content/ext-simpletranslate.css +++ b/resources/in-content/ext-simpletranslate.css @@ -6,62 +6,58 @@ /* simple translate extension by sienori */ -@-moz-document url(moz-extension://482959ea-7a4a-4baa-900a-86fb03b08903/popup/index.html) +@-moz-document regexp("^moz-extension://.*/popup/index.html") { - :root { + :root[uc-extension-id="simple-translate@sienori"] { border-radius: 3px !important; background: none !important; } - body { + :root[uc-extension-id="simple-translate@sienori"] body { --main-text: var(--uc-arrowpanel-color) !important; --line: transparent !important; --main-bg: var(--uc-arrowpanel-background) !important; --sub-text: var(--uc-panel-description-color) !important; --highlight: var(--in-parent-link-color) !important; - } - - body { color: var(--uc-arrowpanel-color) !important; border-radius: 3px !important; } @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - body { + :root[uc-extension-id="simple-translate@sienori"] body { font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; font-kerning: normal !important; } - .title { + :root[uc-extension-id="simple-translate@sienori"] .title { font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; } } - button:not([disabled="true"], :disabled) { + :root[uc-extension-id="simple-translate@sienori"] button:not([disabled="true"], :disabled) { display: flex; } - textarea, - select { + :root[uc-extension-id="simple-translate@sienori"] :is(textarea, select) { background-color: var(--search-box-color) !important; color: var(--ui-text-100) !important; border: 1px solid transparent !important; outline: none !important; } - :is(textarea, select):focus-within { + :root[uc-extension-id="simple-translate@sienori"] :is(textarea, select):focus-within { background-color: var(--search-box-focus) !important; color: var(--ui-text-100) !important; border-color: var(--highlight) !important; } - #footer .selectWrap select { + :root[uc-extension-id="simple-translate@sienori"] #footer .selectWrap select { padding-block: 5px !important; height: auto !important; min-height: auto !important; } - #footer .selectWrap::before { + :root[uc-extension-id="simple-translate@sienori"] #footer .selectWrap::before { background: none !important; color: var(--sub-text) !important; fill: currentColor !important; @@ -77,81 +73,94 @@ top: 6px !important; } - #footer .selectWrap:focus-within::before { + :root[uc-extension-id="simple-translate@sienori"] #footer .selectWrap:focus-within::before { color: var(--ui-text-100) !important; } - #footer .selectWrap select:is(:focus-within, :hover) { + :root[uc-extension-id="simple-translate@sienori"] + #footer + .selectWrap + select:is(:focus-within, :hover) { background-color: var(--search-box-focus) !important; } - body hr { + :root[uc-extension-id="simple-translate@sienori"] body hr { border-color: var(--uc-desaturate-dimmed) !important; } - #resultArea { + :root[uc-extension-id="simple-translate@sienori"] #resultArea { background-color: transparent !important; color: var(--uc-arrowpanel-color) !important; } - .resultText, - .candidateText, - .mediaButtons, - .mediaButtons * { + :root[uc-extension-id="simple-translate@sienori"] + :is(.resultText, .candidateText, .mediaButtons), + :root[uc-extension-id="simple-translate@sienori"] .mediaButtons * { background: none !important; } - .mediaButtons { + :root[uc-extension-id="simple-translate@sienori"] .mediaButtons { user-select: none; } - .copy { + :root[uc-extension-id="simple-translate@sienori"] .copy { display: none !important; } - a { + :root[uc-extension-id="simple-translate@sienori"] a { color: var(--in-parent-link-color) !important; } - a:is(:hover, :focus-visible) { + :root[uc-extension-id="simple-translate@sienori"] a:is(:hover, :focus-visible) { color: var(--in-parent-link-color-hover) !important; } - a:hover:active { + :root[uc-extension-id="simple-translate@sienori"] a:hover:active { color: var(--in-parent-link-color-active) !important; } - .react-toggle .react-toggle-track { + :root[uc-extension-id="simple-translate@sienori"] .react-toggle .react-toggle-track { background-color: var(--sub-text) !important; } - .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { + :root[uc-extension-id="simple-translate@sienori"] + .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { background-color: color-mix(in srgb, black 20%, var(--sub-text)) !important; } - .react-toggle--checked .react-toggle-track { + :root[uc-extension-id="simple-translate@sienori"] .react-toggle--checked .react-toggle-track { background-color: var(--in-parent-link-color) !important; } - .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) + :root[uc-extension-id="simple-translate@sienori"] + .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { background-color: var(--in-parent-link-color-hover) !important; } - .react-toggle--disabled { + :root[uc-extension-id="simple-translate@sienori"] .react-toggle--disabled { cursor: not-allowed !important; } - .react-toggle-thumb { + :root[uc-extension-id="simple-translate@sienori"] .react-toggle-thumb { border-color: transparent !important; } - #header .rightButtons .settingsButton:is(:hover, :focus-visible) svg { + :root[uc-extension-id="simple-translate@sienori"] + #header + .rightButtons + .settingsButton:is(:hover, :focus-visible) + svg { fill: var(--highlight) !important; transform: rotate(90deg) !important; } - #header .rightButtons .heartButton:is(:hover, :focus-visible) svg { + :root[uc-extension-id="simple-translate@sienori"] + #header + .rightButtons + .heartButton:is(:hover, :focus-visible) + svg { fill: var(--confirm) !important; } } diff --git a/resources/in-content/ext-sortbookmarks.css b/resources/in-content/ext-sortbookmarks.css index 77b66ad0..6ba9bef1 100644 --- a/resources/in-content/ext-sortbookmarks.css +++ b/resources/in-content/ext-sortbookmarks.css @@ -6,9 +6,9 @@ /* popup content styles for the addon Sort Bookmarks */ -@-moz-document url-prefix("moz-extension://18d76235-7e4d-46e3-961a-2bce21e96472/popup.html") +@-moz-document regexp("moz-extension://.*/popup.html") { - body { + :root[uc-extension-id="sort-bookmarks@heftig"] body { background: var(--uc-arrowpanel-background) !important; color: var(--uc-arrowpanel-color) !important; margin: 0 !important; @@ -16,13 +16,13 @@ box-sizing: border-box !important; } - :root { + :root[uc-extension-id="sort-bookmarks@heftig"] { font-family: sans-serif; font-size: 12px !important; user-select: none; } - #context { + :root[uc-extension-id="sort-bookmarks@heftig"] #context { box-sizing: border-box !important; margin-block: 0 !important; min-width: 200px !important; @@ -40,17 +40,17 @@ letter-spacing: inherit !important; } - #sort-form { + :root[uc-extension-id="sort-bookmarks@heftig"] #sort-form { margin: var(--menupopup-inner-padding-magnitude) !important; padding-block: var(--menupopup-inner-padding-magnitude) !important; border-top: 1px solid var(--uc-desaturate-dimmed) !important; } - #sort-form p { + :root[uc-extension-id="sort-bookmarks@heftig"] #sort-form p { margin: var(--menupopup-inner-padding-magnitude) 6px !important; } - select { + :root[uc-extension-id="sort-bookmarks@heftig"] select { appearance: none; border-radius: var(--general-button-border-radius); margin: 0; @@ -64,7 +64,7 @@ font: inherit; } - select:is(:hover, :focus, :active) { + :root[uc-extension-id="sort-bookmarks@heftig"] select:is(:hover, :focus, :active) { appearance: none; border-radius: var(--general-button-border-radius); margin: 0; @@ -73,7 +73,7 @@ background-color: var(--uc-arrowpanel-dimmed-further) !important; } - fieldset { + :root[uc-extension-id="sort-bookmarks@heftig"] fieldset { margin-inline: 6px !important; margin-block: 10px !important; border: none !important; @@ -82,13 +82,13 @@ padding: 6px 8px 8px !important; } - fieldset > legend { + :root[uc-extension-id="sort-bookmarks@heftig"] fieldset > legend { background-color: var(--uc-panel-box-solid) !important; padding: 3px 8px !important; border-radius: 5px; } - input:is([type="checkbox"], [type="radio"]) { + :root[uc-extension-id="sort-bookmarks@heftig"] input:is([type="checkbox"], [type="radio"]) { appearance: none !important; margin: 0 !important; width: 14px; @@ -103,75 +103,83 @@ color: var(--in-parent-primary-button-text-color); } - input[type="checkbox"] { + :root[uc-extension-id="sort-bookmarks@heftig"] input[type="checkbox"] { border-radius: 2px; margin-inline: 4px; margin-block: 3px 2px; } - .devtools-checkbox-label:not([hidden]) { + :root[uc-extension-id="sort-bookmarks@heftig"] .devtools-checkbox-label:not([hidden]) { display: flex; align-items: center; } - .devtools-checkbox-label input[type="checkbox"] { + :root[uc-extension-id="sort-bookmarks@heftig"] .devtools-checkbox-label input[type="checkbox"] { margin-block: 3px; } - input:is([type="checkbox"], [type="radio"]):is(:hover, :focus-visible) { + :root[uc-extension-id="sort-bookmarks@heftig"] + input:is([type="checkbox"], [type="radio"]):is(:hover, :focus-visible) { background-color: var(--uc-checkbox-unchecked-hover-bgcolor); } - input:is([type="checkbox"], [type="radio"]):is(:hover, :focus-visible):active { + :root[uc-extension-id="sort-bookmarks@heftig"] + input:is([type="checkbox"], [type="radio"]):is(:hover, :focus-visible):active { background-color: var(--uc-checkbox-unchecked-active-bgcolor); } - input:is([type="checkbox"], [type="radio"]):is([checked="true"], :checked):is(:hover, :focus-visible) { + :root[uc-extension-id="sort-bookmarks@heftig"] + input:is([type="checkbox"], [type="radio"]):is([checked="true"], :checked):is(:hover, :focus-visible) { background-color: var(--uc-checkbox-checked-hover-bgcolor); } - input:is([type="checkbox"], [type="radio"]):is([checked="true"], :checked):is(:hover, :focus-visible):active { + :root[uc-extension-id="sort-bookmarks@heftig"] + input:is([type="checkbox"], [type="radio"]):is([checked="true"], :checked):is(:hover, :focus-visible):active { background-color: var(--uc-checkbox-checked-active-bgcolor); } - input[type="checkbox"]:is([checked="true"], :checked) { + :root[uc-extension-id="sort-bookmarks@heftig"] + input[type="checkbox"]:is([checked="true"], :checked) { background-image: url(chrome://userchrome/content/check.svg); border-color: var(--uc-checkbox-checked-border-color); background-color: var(--uc-checkbox-checked-bgcolor); } - input[type="radio"] { + :root[uc-extension-id="sort-bookmarks@heftig"] input[type="radio"] { border-radius: 100%; margin-inline: 4px; } - input[type="radio"]:is([checked="true"], :checked) { + :root[uc-extension-id="sort-bookmarks@heftig"] + input[type="radio"]:is([checked="true"], :checked) { background-image: url(chrome://userchrome/content/radio.svg); border-color: var(--uc-checkbox-checked-border-color); background-color: var(--uc-checkbox-checked-bgcolor); } - #sort-form p, - fieldset div { + :root[uc-extension-id="sort-bookmarks@heftig"] #sort-form p, + :root[uc-extension-id="sort-bookmarks@heftig"] fieldset div { align-items: center !important; display: flex !important; flex-flow: row nowrap !important; } - input:is([type="radio"], [type="checkbox"]) ~ label { + :root[uc-extension-id="sort-bookmarks@heftig"] + input:is([type="radio"], [type="checkbox"]) + ~ label { padding-inline-start: 6px; padding-block: 2px; } - #sort-form p select { + :root[uc-extension-id="sort-bookmarks@heftig"] #sort-form p select { margin-inline-start: 6px; } - #autosort { + :root[uc-extension-id="sort-bookmarks@heftig"] #autosort { margin-inline-start: 4px !important; } - button[type="submit"] { + :root[uc-extension-id="sort-bookmarks@heftig"] button[type="submit"] { appearance: none; border-radius: var(--context-menuitem-border-radius) !important; height: revert !important; @@ -187,32 +195,35 @@ background-color: var(--uc-arrowpanel-dimmed) !important; } - button[type="submit"][disabled] { + :root[uc-extension-id="sort-bookmarks@heftig"] button[type="submit"][disabled] { background-color: transparent !important; border-color: var(--uc-arrowpanel-dimmed) !important; opacity: 0.6 !important; } - button[type="submit"]:is(:hover, :focus-visible, :-moz-focusring):not([disabled]) { + :root[uc-extension-id="sort-bookmarks@heftig"] + button[type="submit"]:is(:hover, :focus-visible, :-moz-focusring):not([disabled]) { background-color: var(--in-parent-primary-button-background) !important; border-color: transparent !important; } - button[type="submit"]:is(:hover, :focus-visible, :-moz-focusring):active:not([disabled]) { + :root[uc-extension-id="sort-bookmarks@heftig"] + button[type="submit"]:is(:hover, :focus-visible, :-moz-focusring):active:not([disabled]) { background-color: var(--in-parent-primary-button-background-hover) !important; border-color: transparent !important; } - :-moz-focusring { + :root[uc-extension-id="sort-bookmarks@heftig"] :-moz-focusring { outline: none !important; } @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - * { + :root[uc-extension-id="sort-bookmarks@heftig"] * { font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif; } - #context { + + :root[uc-extension-id="sort-bookmarks@heftig"] #context { font-weight: var(--uc-font-weight-bold) !important; } } diff --git a/resources/in-content/ext-tabnotes.css b/resources/in-content/ext-tabnotes.css index 82e91d7f..ba238b56 100644 --- a/resources/in-content/ext-tabnotes.css +++ b/resources/in-content/ext-tabnotes.css @@ -9,14 +9,20 @@ which you can download from the extensions folder in the main directory. */ @-moz-document regexp("moz-extension://.*/newtab.html") { - textarea::selection, - ::selection { + :root[uc-extension-id="note-tab@aminomancer"] textarea::selection, + :root[uc-extension-id="note-tab@aminomancer"] ::selection { color: var(--content-selection-color) !important; background-color: var(--content-selection-bgcolor) !important; } - textarea:-moz-window-inactive::selection, - :-moz-window-inactive::selection { + :root[uc-extension-id="note-tab@aminomancer"] textarea:-moz-window-inactive::selection, + :root[uc-extension-id="note-tab@aminomancer"] :-moz-window-inactive::selection { background-color: var(--content-selection-bgcolor-disabled) !important; } + + :root[uc-extension-id="note-tab@aminomancer"] :is(#note-content, .list-inner), + :root[uc-extension-id="note-tab@aminomancer"] .list-inner :is(ul, li, span) { + font-family: Fira Code !important; + font-weight: 300 !important; + } } diff --git a/resources/in-content/ext-ublock.css b/resources/in-content/ext-ublock.css index 9becb394..f4896b41 100644 --- a/resources/in-content/ext-ublock.css +++ b/resources/in-content/ext-ublock.css @@ -6,13 +6,10 @@ /* uBlock Origin dark theme */ -@-moz-document regexp("moz-extension://8d413415-fec4-4612-9717-941c64de177b/.*") +@-moz-document regexp("^moz-extension://.*/.*") { @media (prefers-color-scheme: dark) { - :root { - --link-ink: hsl(266.9, 95.2%, 75.7%) !important; - --checkbox-checked-ink: hsl(266.9, 95.2%, 75.7%) !important; - --dashboard-tab-active-ink: hsl(266.9, 95.2%, 75.7%) !important; + :root[uc-extension-id="uBlock0@raymondhill.net"] { --fg-icon-info-lvl-0-dimmed: hsl(0, 0%, 53.3%) !important; --fg-icon-info-lvl-1-dimmed: hsla(258, 57%, 35%, 1) !important; --fg-icon-info-lvl-1: hsla(258, 66%, 48%, 1) !important; @@ -48,7 +45,7 @@ --fg-0-40: hsla(0, 0%, 53%, 0.4) !important; --fg-0-30: hsla(0, 0%, 53%, 0.3) !important; --fg-0-20: hsla(0, 0%, 53%, 0.2) !important; - --link-ink: hsl(266.9, 95.2%, 75.7%) !important; + --link-ink: var(--in-content-link-color) !important; --fieldset-header-surface: transparent !important; --fieldset-header-ink: var(--light-gray-30) !important; --hr-ink: var(--dark-gray-50) !important; @@ -59,7 +56,7 @@ --button-disabled-surface: var(--dark-gray-50) !important; --bg-transient-notice: var(--dark-gray-50) !important; --dashboard-bar-shadow: 0px 0px 0px 1px var(--default-ink-a4) !important; - --dashboard-tab-active-ink: hsl(266.9, 95.2%, 75.7%) !important; + --dashboard-tab-active-ink: var(--in-content-link-color) !important; --dashboard-tab-surface-hover: var(--default-surface-hover) !important; --fg-icon-info-lvl-0-dimmed: hsl(0, 0%, 53.3%) !important; --fg-icon-info-lvl-0: inherit !important; @@ -109,15 +106,15 @@ --button-preferred-ink: var(--light-gray-70) !important; --checkbox-size: calc(var(--font-size) + 2px) !important; --checkbox-ink: var(--default-ink) !important; - --checkbox-checked-ink: hsl(266.9, 95.2%, 75.7%) !important; - --checkbox-hover-ink: hsl(266.9, 35.2%, 35.7%) !important; + --checkbox-checked-ink: var(--in-content-link-color) !important; + --checkbox-hover-ink: var(--purple-40-a30) !important; } - :root:not(#ublock0-epicker) body { + :root[uc-extension-id="uBlock0@raymondhill.net"]:not(#ublock0-epicker) body { background-color: var(--bg-1) !important; } - #uBO-popup-panel body { + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] body { --font-size: 12px !important; --popup-gap: 10px !important; --popup-gap-thin: 5px !important; @@ -125,102 +122,121 @@ --checkbox-size: calc(var(--font-size) + 2px) !important; } - #uBO-popup-panel #main { + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] #main { max-width: 280px !important; } - #uBO-popup-panel #basicStats > [data-i18n] { + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] #basicStats > [data-i18n] { font-size: var(--font-size) !important; } - #uBO-popup-panel #basicStats > [data-i18n] + span { + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] + #basicStats + > [data-i18n] + + span { font-size: calc(var(--font-size) + 1px) !important; } - #uBO-popup-panel .toolRibbon { + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] .toolRibbon { display: flex !important; flex-flow: row nowrap !important; } - #uBO-popup-panel .toolRibbon .tool { + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] .toolRibbon .tool { font-size: calc(var(--font-size) + 4px) !important; flex-grow: 1 !important; } - #uBO-popup-panel body:not([data-more~="a"]) [data-more="a"], - #uBO-popup-panel body:not([data-more~="b"]) [data-more="b"], - #uBO-popup-panel body:not([data-more~="c"]) [data-more="c"], - #uBO-popup-panel body:not([data-more~="d"]) [data-more="d"], - #uBO-popup-panel body:not([data-more~="f"]) [data-more="f"] { + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] + body:not([data-more~="a"]) + [data-more="a"], + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] + body:not([data-more~="b"]) + [data-more="b"], + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] + body:not([data-more~="c"]) + [data-more="c"], + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] + body:not([data-more~="d"]) + [data-more="d"], + #uBO-popup-panel[uc-extension-id="uBlock0@raymondhill.net"] + body:not([data-more~="f"]) + [data-more="f"] { border: none !important; } @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - body { + :root[uc-extension-id="uBlock0@raymondhill.net"] body { font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; } - #hostname > span + span { + :root[uc-extension-id="uBlock0@raymondhill.net"] #hostname > span + span { font-weight: 500 !important; } } - button:not(.disabled, [disabled]) { + :root[uc-extension-id="uBlock0@raymondhill.net"] button:not(.disabled, [disabled]) { cursor: pointer !important; } - #cloudWidget { - background-color: hsl(246.7, 11.7%, 15.1%) !important; + :root[uc-extension-id="uBlock0@raymondhill.net"] #cloudWidget { + background-color: var(--in-content-button-highlight-dark) !important; } - #actions, - #sticky { + :root[uc-extension-id="uBlock0@raymondhill.net"] #actions, + :root[uc-extension-id="uBlock0@raymondhill.net"] #sticky { background-color: var(--bg-1) !important; } - .CodeMirror-cursor { + :root[uc-extension-id="uBlock0@raymondhill.net"] .CodeMirror-cursor { caret-color: white !important; color: white !important; border-color: white !important; } - .CodeMirror-selected { + :root[uc-extension-id="uBlock0@raymondhill.net"] .CodeMirror-selected { background: var(--dark-gray-70) !important; } - .CodeMirror-focused .CodeMirror-selected { + :root[uc-extension-id="uBlock0@raymondhill.net"] .CodeMirror-focused .CodeMirror-selected { background: var(--dark-gray-50) !important; } - a:hover { - color: hsl(266.9, 99.2%, 85.7%) !important; + :root[uc-extension-id="uBlock0@raymondhill.net"] a:hover { + --link-ink: var(--in-content-link-color-hover) !important; } - #cloudCapacity { + :root[uc-extension-id="uBlock0@raymondhill.net"] #cloudCapacity { background-color: var(--dark-gray-30) !important; } - .CodeMirror-activeline-background { + :root[uc-extension-id="uBlock0@raymondhill.net"] .CodeMirror-activeline-background { background: var(--dark-gray-70) !important; } - .checkbox > input[type="checkbox"] + svg { + :root[uc-extension-id="uBlock0@raymondhill.net"] .checkbox > input[type="checkbox"] + svg { border: 1.5px solid var(--checkbox-ink) !important; } - .checkbox > input[type="checkbox"]:checked + svg { + :root[uc-extension-id="uBlock0@raymondhill.net"] + .checkbox + > input[type="checkbox"]:checked + + svg { background-color: var(--checkbox-checked-ink); border-color: var(--checkbox-checked-ink) !important; stroke: var(--default-surface); } - .checkbox > input[type="checkbox"]:not(:checked):hover + svg { + :root[uc-extension-id="uBlock0@raymondhill.net"] + .checkbox + > input[type="checkbox"]:not(:checked):hover + + svg { border-color: var(--checkbox-checked-ink) !important; background-color: var(--checkbox-hover-ink) !important; stroke: transparent !important; } - select { + :root[uc-extension-id="uBlock0@raymondhill.net"] select { appearance: none !important; background-color: var(--dark-gray-30) !important; color: var(--default-ink) !important; @@ -230,15 +246,15 @@ padding-inline: 3px !important; } - select > option { + :root[uc-extension-id="uBlock0@raymondhill.net"] select > option { appearance: none !important; background-color: var(--dark-gray-30) !important; color: var(--default-ink) !important; border: none !important; } - input[type="number"], - input[type="search"] { + :root[uc-extension-id="uBlock0@raymondhill.net"] + input:is([type="number"], [type="search"]) { appearance: none !important; background-color: var(--dark-gray-30) !important; color: var(--default-ink) !important; @@ -248,16 +264,20 @@ padding-inline: 3px !important; } - .cm-search-widget .fa-icon:not(.fa-icon-ro):hover { + :root[uc-extension-id="uBlock0@raymondhill.net"] + .cm-search-widget + .fa-icon:not(.fa-icon-ro):hover { fill: white !important; } - .cm-search-widget .cm-search-widget-button:hover { + :root[uc-extension-id="uBlock0@raymondhill.net"] + .cm-search-widget + .cm-search-widget-button:hover { color: white !important; } - #diff, - #advancedSettings { + :root[uc-extension-id="uBlock0@raymondhill.net"] #diff, + :root[uc-extension-id="uBlock0@raymondhill.net"] #advancedSettings { border-color: var(--cm-gutter-border) !important; } } diff --git a/resources/in-content/root.css b/resources/in-content/root.css index 079cb208..c26880d7 100644 --- a/resources/in-content/root.css +++ b/resources/in-content/root.css @@ -39,20 +39,20 @@ @-moz-document plain-text-document(), media-document(all) { @font-face { - font-family: "Overpass Mono"; + font-family: "Fira Code"; font-style: normal; - font-weight: 100; - src: local("Overpass Mono"), local("Overpass Mono Light"), local("OverpassMono-Light"); + font-weight: 300; + src: local("Fira Code"), local("Fira Code Light"), local("FiraCode-Light"); } :root { - font-family: Overpass Mono, -moz-fixed; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; } xmp, pre, plaintext { - font-family: Overpass Mono, -moz-fixed; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; } img.transparent { diff --git a/resources/in-content/site-github.css b/resources/in-content/site-github.css index e70a4877..1788a8d6 100644 --- a/resources/in-content/site-github.css +++ b/resources/in-content/site-github.css @@ -11,8 +11,10 @@ which requires Stylus. don't use this stylesheet if you don't have that theme, i .rgh-monospace-textareas #merge_title_field, .rgh-monospace-textareas #commit-summary-input, .rgh-monospace-textareas textarea { - font-family: Overpass Mono, -moz-fixed !important; - font-weight: 100 !important; + font-family: Fira Code, SF Mono, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, + Liberation Mono, monospace !important; + font-weight: 300 !important; + font-size: 14px !important; } .blob-code-inner, @@ -31,6 +33,10 @@ which requires Stylus. don't use this stylesheet if you don't have that theme, i word-break: break-word !important; overflow-wrap: break-word !important; display: block !important; + font-family: Fira Code, SF Mono, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, + Liberation Mono, monospace !important; + font-weight: 300 !important; + font-size: 14px !important; } body:not(.nowrap) td.blob-code-inner { diff --git a/resources/in-content/site-mozilla.css b/resources/in-content/site-mozilla.css new file mode 100644 index 00000000..fff0d5ab --- /dev/null +++ b/resources/in-content/site-mozilla.css @@ -0,0 +1,15 @@ +/* This Source Code Form is subject to the terms of the Creative Commons +* Attribution-NonCommercial-ShareAlike International License, v. 4.0. +* If a copy of the CC BY-NC-SA 4.0 was not distributed with this +* file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ +* or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */ + +/* CSS styles fixes for various mozilla sites */ + +@-moz-document domain("addons.mozilla.org") { + /* invert an icon that darkreader can't invert correctly. */ + :root[data-darkreader-mode="dynamic"][data-darkreader-scheme="dark"] + .Icon-permission-unlimitedStorage { + background-image: url('data:image/svg+xml;utf8,') !important; + } +} diff --git a/resources/in-content/system.css b/resources/in-content/system.css index 01dc5da8..82028a3b 100644 --- a/resources/in-content/system.css +++ b/resources/in-content/system.css @@ -10,20 +10,20 @@ @-moz-document regexp("view-source:.*") { @font-face { - font-family: "Overpass Mono"; + font-family: "Fira Code"; font-style: normal; - font-weight: 100; - src: local("Overpass Mono"), local("Overpass Mono Light"), local("OverpassMono-Light"); + font-weight: 300; + src: local("Fira Code"), local("Fira Code Light"), local("FiraCode-Light"); } :root { - font-family: Overpass Mono, -moz-fixed; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; } xmp, pre, plaintext { - font-family: Overpass Mono, -moz-fixed; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; } @media (prefers-color-scheme: dark) { @@ -755,15 +755,15 @@ } /* firefox screenshots addon overlay */ -@-moz-document url("moz-extension://bc8fcf05-0a6f-40d5-a068-b452be394b53/blank.html") +@-moz-document url("^moz-extension://.*/blank.html.*") { - .all-buttons-container { + :root[uc-extension-id="screenshots@mozilla.org"] .all-buttons-container { background-color: var(--content-principal-box-background) !important; height: 88px !important; box-shadow: 0 0 0 1px rgba(12, 12, 13, 0.1), 0 0 8px rgba(12, 12, 13, 0.1) !important; } - .all-buttons-container button { + :root[uc-extension-id="screenshots@mozilla.org"] .all-buttons-container button { color: var(--content-principal-page-color) !important; background-color: transparent !important; border-radius: var(--general-button-border-radius) !important; @@ -774,17 +774,17 @@ -moz-context-properties: fill, stroke !important; } - .all-buttons-container button:hover { + :root[uc-extension-id="screenshots@mozilla.org"] .all-buttons-container button:hover { background-color: var(--content-principal-button-background) !important; border: 1px solid var(--content-principal-button-background) !important; } - .hover-highlight { + :root[uc-extension-id="screenshots@mozilla.org"] .hover-highlight { background: rgba(255, 255, 255, 0.1) !important; z-index: 2147483646 !important; } - .pixel-dimensions { + :root[uc-extension-id="screenshots@mozilla.org"] .pixel-dimensions { margin-block-start: -5px; margin-inline-start: -5px; z-index: 2147483647 !important; @@ -793,7 +793,7 @@ } @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - .pixel-dimensions { + :root[uc-extension-id="screenshots@mozilla.org"] .pixel-dimensions { font-weight: var(--uc-font-weight-bold) !important; font-family: -apple-system, BlinkMacSystemFont, SF Pro, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif !important; diff --git a/resources/layout/XMLPrettyPrint.css b/resources/layout/XMLPrettyPrint.css index fb798b18..b390a1a9 100644 --- a/resources/layout/XMLPrettyPrint.css +++ b/resources/layout/XMLPrettyPrint.css @@ -17,7 +17,8 @@ the location URL doesn't reflect that this stylesheet is used. */ :root, :host { color-scheme: light dark; - font-family: Overpass Mono, -moz-fixed; + font-family: Fira Code, SF Mono, -moz-fixed; + font-weight: 300; } } @@ -71,6 +72,7 @@ the location URL doesn't reflect that this stylesheet is used. */ } .comment { - font-family: monospace; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; + font-weight: 300; white-space: pre; } diff --git a/resources/layout/contentaccessible/viewsource.css b/resources/layout/contentaccessible/viewsource.css index fbff22b6..0544a32b 100644 --- a/resources/layout/contentaccessible/viewsource.css +++ b/resources/layout/contentaccessible/viewsource.css @@ -10,13 +10,14 @@ @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ @font-face { - font-family: "Overpass Mono"; + font-family: "Fira Code"; font-style: normal; - font-weight: 100; - src: local("Overpass Mono"), local("Overpass Mono Light"), local("OverpassMono-Light"); + font-weight: 300; + src: local("Fira Code"), local("Fira Code Light"), local("FiraCode-Light"); } *|*:root { - font-family: Overpass Mono, -moz-fixed; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; + font-weight: 300; background-color: white; color: black; direction: ltr; @@ -24,8 +25,8 @@ height: 100%; } #viewsource { - font-family: Overpass Mono, -moz-fixed; - font-weight: normal; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; + font-weight: 300; white-space: pre; counter-reset: line; height: 100%; @@ -53,13 +54,13 @@ span[id]::before { margin: 0 0 0 -5ch; text-align: right; color: #ccc; - font-weight: normal; + font-weight: 300; font-style: normal; } xmp, pre, plaintext { - font-family: Overpass Mono, -moz-fixed; + font-family: Fira Code, SF Mono, -moz-fixed, monospace; } .highlight .start-tag { color: purple; diff --git a/resources/script-override/tabMods.uc.js b/resources/script-override/tabMods.uc.js index 5b807640..52907432 100644 --- a/resources/script-override/tabMods.uc.js +++ b/resources/script-override/tabMods.uc.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Tab Mods — tabbrowser-tab class definition mods -// @version 1.3 +// @version 1.3.1 // @author aminomancer // @homepage https://github.com/aminomancer/uc.css.js // @description Restore the tab sound button and other aspects of the tab that (imo) were better before Proton. @@ -34,6 +34,7 @@ onoverflow="this.setAttribute('textoverflow', 'true');" onunderflow="this.removeAttribute('textoverflow');" align="start" + pack="center" flex="1">