nix/11.stylix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

zen-browser: support opacity (#2332)

Browse source 
Link: https://github.com/nix-community/stylix/pull/2332

Reviewed-by: Karun Sandhu <129101708+MrSom3body@users.noreply.github.com>
Reviewed-by: Noah Biewesch <dev@noahbiewesch.com>
Reviewed-by: 0xda157 <da157@voidq.com>
This commit is contained in:
Mela 2026-06-09 16:26:12 +01:00 • committed by GitHub
parent 3a02d9f736
commit a378e4c090
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 56 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

24
modules/zen-browser/hm.nix
View file

@ -20,6 +20,12 @@ mkTarget {
default = true;
description = "enables userChrome and userContent css styles for the browser";
};
opacityHex = lib.mkOption {
internal = true;
type = lib.types.singleLineStr;
default = "";
};
};
config = lib.optionals (options.programs ? zen-browser) [
@ -31,6 +37,14 @@ mkTarget {
''stylix: zen-browser: `config.stylix.targets.zen-browser.profileNames` is not set. Declare profile names with 'config.stylix.targets.zen-browser.profileNames = [ "<PROFILE_NAME>" ];'.'';
}
)
(
{ opacity }:
{
stylix.targets.zen-browser.opacityHex = lib.toHexString (
builtins.ceil (opacity.applications * 255)
);
}
)
(
{ cfg, fonts }:
{
@ -56,9 +70,15 @@ mkTarget {
"toolkit.legacyUserProfileCustomizations.stylesheets" = true;
};
userChrome = import ./userChrome.nix { inherit colors; };
userChrome = import ./userChrome.nix {
inherit colors;
inherit (cfg) opacityHex;
};
userContent = import ./userContent.nix { inherit colors; };
userContent = import ./userContent.nix {
inherit colors;
inherit (cfg) opacityHex;
};
})
);
}

30
modules/zen-browser/userChrome.nix
View file

@ -1,4 +1,4 @@
{ colors }:
{ colors, opacityHex }:
with colors;
''
:root {
@ -18,13 +18,13 @@ with colors;
--arrowpanel-background: #${base00-hex} !important;
--sidebar-text-color: #${base05-hex} !important;
--lwt-sidebar-text-color: #${base05-hex} !important;
--lwt-sidebar-background-color: #${base00-hex} !important;
--toolbar-bgcolor: #${base02-hex} !important;
--newtab-background-color: #${base00-hex} !important;
--zen-themed-toolbar-bg: #${base00-hex} !important;
--zen-main-browser-background: #${base00-hex} !important;
--toolbox-bgcolor-inactive: #${base01-hex} !important;
--zen-themed-toolbar-bg-transparent: #${base01-hex} !important;
--lwt-sidebar-background-color: #${base00-hex}${opacityHex} !important;
--toolbar-bgcolor: #${base02-hex}${opacityHex} !important;
--newtab-background-color: #${base00-hex}${opacityHex} !important;
--zen-themed-toolbar-bg: #${base00-hex}${opacityHex} !important;
--zen-main-browser-background: #${base00-hex}${opacityHex} !important;
--toolbox-bgcolor-inactive: #${base01-hex}${opacityHex} !important;
--zen-themed-toolbar-bg-transparent: #${base01-hex}${opacityHex} !important;
}
zen-workspace {
@ -41,15 +41,15 @@ with colors;
}
#sidebar-box {
background-color: #${base00-hex} !important;
background-color: #${base00-hex}${opacityHex} !important;
}
.sidebar-placesTree {
background-color: #${base00-hex} !important;
background-color: #${base00-hex}${opacityHex} !important;
}
#zen-workspaces-button {
background-color: #${base00-hex} !important;
background-color: #${base00-hex}${opacityHex} !important;
}
.urlbar-background {
@ -57,7 +57,7 @@ with colors;
}
.content-shortcuts {
background-color: #${base00-hex} !important;
background-color: #${base00-hex}${opacityHex} !important;
border-color: #${base0D-hex} !important;
}
@ -77,7 +77,7 @@ with colors;
#zen-media-controls-toolbar {
& #zen-media-progress-bar {
&::-moz-range-track {
background: #${base02-hex} !important;
background: #${base02-hex}${opacityHex} !important;
}
}
}
@ -140,11 +140,11 @@ with colors;
}
#commonDialog {
background-color: #${base00-hex} !important;
background-color: #${base00-hex}${opacityHex} !important;
}
#zen-browser-background {
--zen-main-browser-background: #${base00-hex} !important;
--zen-main-browser-background: #${base00-hex}${opacityHex} !important;
}
menu,

38
modules/zen-browser/userContent.nix
View file

@ -1,4 +1,4 @@
{ colors }:
{ colors, opacityHex }:
with colors;
''
/* Common variables affecting all pages */
@ -8,8 +8,8 @@ with colors;
--color-accent-primary: #${base0D-hex} !important;
--color-accent-primary-hover: #${base0D-hex} !important;
--color-accent-primary-active: #${base0D-hex} !important;
background-color: #${base00-hex} !important;
--in-content-page-background: #${base00-hex} !important;
background-color: #${base00-hex}${opacityHex} !important;
--in-content-page-background: #${base00-hex}${opacityHex} !important;
}
}
@ -17,12 +17,12 @@ with colors;
@-moz-document url("about:newtab"), url("about:home") {
:root {
--newtab-background-color: #${base00-hex} !important;
--newtab-background-color-secondary: #${base02-hex} !important;
--newtab-background-color: #${base00-hex}${opacityHex} !important;
--newtab-background-color-secondary: #${base02-hex}${opacityHex} !important;
--newtab-element-hover-color: #${base02-hex} !important;
--newtab-text-primary-color: #${base05-hex} !important;
--newtab-wordmark-color: #${base05-hex} !important;
--newtab-primary-action-background: #${base0D-hex} !important;
--newtab-primary-action-background: #${base0D-hex}${opacityHex} !important;
}
.icon {
@ -49,7 +49,7 @@ with colors;
}
.top-site-outer .search-topsite {
background-color: #${base0D-hex} !important;
background-color: #${base0D-hex}${opacityHex} !important;
}
.compact-cards .card-outer .card-context .card-context-icon.icon-download {
@ -60,17 +60,17 @@ with colors;
/* Variables and styles specific to about:preferences */
@-moz-document url-prefix("about:preferences") {
:root {
--zen-colors-tertiary: #${base01-hex} !important;
--zen-colors-tertiary: #${base01-hex}${opacityHex} !important;
--in-content-text-color: #${base05-hex} !important;
--link-color: #${base0D-hex} !important;
--link-color-hover: #${base0D-hex} !important;
--zen-colors-primary: #${base02-hex} !important;
--in-content-box-background: #${base02-hex} !important;
--zen-primary-color: #${base0D-hex} !important;
--zen-colors-primary: #${base02-hex}${opacityHex} !important;
--in-content-box-background: #${base02-hex}${opacityHex} !important;
--zen-primary-color: #${base0D-hex}${opacityHex} !important;
}
groupbox , moz-card{
background: #${base00-hex} !important;
background: #${base00-hex}${opacityHex} !important;
}
button,
@ -80,7 +80,7 @@ with colors;
}
.main-content {
background-color: #${base00-hex} !important;
background-color: #${base00-hex}${opacityHex} !important;
}
.identity-color-blue {
@ -127,28 +127,28 @@ with colors;
/* Variables and styles specific to about:addons */
@-moz-document url-prefix("about:addons") {
:root {
--zen-dark-color-mix-base: #${base01-hex} !important;
--background-color-box: #${base00-hex} !important;
--zen-dark-color-mix-base: #${base01-hex}${opacityHex} !important;
--background-color-box: #${base00-hex}${opacityHex} !important;
}
}
/* Variables and styles specific to about:protections */
@-moz-document url-prefix("about:protections") {
:root {
--zen-primary-color: #${base00-hex} !important;
--zen-primary-color: #${base00-hex}${opacityHex} !important;
--social-color: #${base0E-hex} !important;
--coockie-color: #${base0D-hex} !important;
--fingerprinter-color: #${base0A-hex} !important;
--cryptominer-color: #${base0F-hex} !important;
--tracker-color: #${base0B-hex} !important;
--in-content-primary-button-background-hover: #${base03-hex} !important;
--in-content-primary-button-background-hover: #${base03-hex}${opacityHex} !important;
--in-content-primary-button-text-color-hover: #${base05-hex} !important;
--in-content-primary-button-background: #${base03-hex} !important;
--in-content-primary-button-background: #${base03-hex}${opacityHex} !important;
--in-content-primary-button-text-color: #${base05-hex} !important;
}
.card {
background-color: #${base02-hex} !important;
background-color: #${base02-hex}${opacityHex} !important;
}
}