commit 79525e1b2d7412861af89b839795513bd3ba973d
parent 9db3f91ff090245a23ea58ac363aa375cfd7d5ab
Author: awy <awy@awy.one>
Date: Mon, 24 Nov 2025 19:32:11 +0300
colors
Diffstat:
| A | catppuccinContent.css | | | 116 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | gruvboxContent.css | | | 141 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------- |
| M | userContent.css | | | 66 | +++++++++++++++++++++++++++++++++--------------------------------- |
3 files changed, 261 insertions(+), 62 deletions(-)
diff --git a/catppuccinContent.css b/catppuccinContent.css
@@ -0,0 +1,116 @@
+/* USER FACING VARIABLES -------------------------------------------------------------------------------------- */
+/* this file does NOT have to be updated between versions */
+
+/* NOTE: restart Firefox to apply any changes */
+body, html {
+ overflow: -moz-scrollbars-none;
+ scrollbar-width: none !important;
+}
+
+* {
+ scrollbar-width: none !important;
+}
+
+:root {
+ /* custom accent color to be used across Firefox*/
+ /* use hexcode or color name */
+ --custom-accent-color: #f5c2e7;
+
+ /* background color */
+ --uc-my-background-color: #181825 !important;
+ --background-color-canvas: var(--uc-my-background-color) !important;
+ --background-color-box: var(--uc-my-background-color) !important;
+
+ /* text color */
+ --in-content-page-color: #cdd6f4 !important;
+
+ --table-row-background-color-alternate:#1e1e2e !important;
+
+
+ /* color of the tab dividers / separators */
+ /* set variable = none, to disable dividers */
+ --custom-tab-divider-color: none;
+}
+
+@-moz-document regexp("^(about:).*") {
+ body {
+ background-color: #181825 !important;
+ }
+}
+
+/* CUSTOM ACCENT COLORS -------------------------------------------------------------------------------------- */
+
+@-moz-document regexp("^(about:|chrome:|moz-extension:).*") {
+
+ html:not([role="dialog"]),
+ html:not([role="dialog"]) *,
+ html:not([role="dialog"]) body.activity-stream,
+ window:not([chromehidden]),
+ window:not([chromehidden])>dialog {
+ --surface-1: #181825 !important;
+ --surface-2: #181825 !important;
+ --accent-surface-1: #ebcb8b !important;
+ --dashboard-tab-active-ink: #ebcb8b !important;
+ --in-content-primary-button-background: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important;
+
+ --in-content-item-selected: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-highlight: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ /* --in-content-border-focus: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important; */
+ --in-content-border-focus: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-active: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-active-shadow: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-category-outline-focus: 1px solid transparent !important;
+ --in-content-accent-color: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-table-header-background: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-link-color: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-link-color-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --newtab-focus-outline: var(--in-content-border-active-shadow) !important;
+ --newtab-focus-border: var(--in-content-border-focus) !important;
+ --newtab-focus-border-selected: var(--custom-accent-color) !important;
+ --newtab-textbox-focus-color: var(--in-content-border-focus) !important;
+ --newtab-primary-action-background: var(--custom-accent-color) !important;
+ --color-accent-primary: var(--custom-accent-color) !important;
+ --color-accent-primary-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --color-accent-primary-active: var(--custom-accent-color) !important;
+ --brand-color-accent: var(--custom-accent-color) !important;
+ --brand-color-accent-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --brand-color-accent-active: var(--custom-accent-color) !important;
+ }
+}
+
+@-moz-document url("chrome://global/content/commonDialog.xhtml") {
+ #commonDialog[subdialog] checkbox {
+ --checkbox-checked-bgcolor: var(--custom-accent-color, #f5c2e7) !important;
+ --checkbox-checked-hover-bgcolor: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --checkbox-checked-active-bgcolor: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important;
+ }
+}
+
+.topsite-form .form-wrapper input[type="text"]:focus-visible {
+ outline: none !important;
+ border-color: var(--newtab-focus-border) !important;
+}
+
+.showPrivate .search-handoff-button.focused {
+ outline: 0;
+ border: 1px solid var(--newtab-focus-border) !important;
+ box-shadow: 0 0 0 2px var(--newtab-focus-outline) !important;
+}
+
+::-moz-progress-bar {
+ background-color: var(--custom-accent-color, #f5c2e7) !important;
+}
+
+login-filter {
+ --in-content-primary-button-background: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important;
+}
+
+::selection {
+ color: #1e1e2e !important;
+ background: #f5c2e7 !important;
+}
diff --git a/gruvboxContent.css b/gruvboxContent.css
@@ -1,33 +1,116 @@
-@-moz-document url-prefix("about:"),
- url-prefix("chrome:")
-{
+/* USER FACING VARIABLES -------------------------------------------------------------------------------------- */
+/* this file does NOT have to be updated between versions */
+
+/* NOTE: restart Firefox to apply any changes */
+body, html {
+ overflow: -moz-scrollbars-none;
+ scrollbar-width: none !important;
+}
+
+* {
+ scrollbar-width: none !important;
+}
+
+:root {
+ /* custom accent color to be used across Firefox*/
+ /* use hexcode or color name */
+ --custom-accent-color: #d3869b;
+
+ /* background color */
+ --uc-my-background-color: #1d2021 !important;
+ --background-color-canvas: var(--uc-my-background-color) !important;
+ --background-color-box: var(--uc-my-background-color) !important;
+
+ /* text color */
+ --in-content-page-color: #ebdbb2 !important;
+
+ --table-row-background-color-alternate:#282828 !important;
+
+
+ /* color of the tab dividers / separators */
+ /* set variable = none, to disable dividers */
+ --custom-tab-divider-color: none;
+}
+
+@-moz-document regexp("^(about:).*") {
body {
- background-color: #32302F !important;
+ background-color: #1d2021 !important;
+ }
+}
+
+/* CUSTOM ACCENT COLORS -------------------------------------------------------------------------------------- */
+
+@-moz-document regexp("^(about:|chrome:|moz-extension:).*") {
+
+ html:not([role="dialog"]),
+ html:not([role="dialog"]) *,
+ html:not([role="dialog"]) body.activity-stream,
+ window:not([chromehidden]),
+ window:not([chromehidden])>dialog {
+ --surface-1: #1d2021 !important;
+ --surface-2: #1d2021 !important;
+ --accent-surface-1: #ebcb8b !important;
+ --dashboard-tab-active-ink: #ebcb8b !important;
+ --in-content-primary-button-background: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important;
+
+ --in-content-item-selected: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-border-highlight: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-border-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ /* --in-content-border-focus: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important; */
+ --in-content-border-focus: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-border-active: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-border-active-shadow: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-category-outline-focus: 1px solid transparent !important;
+ --in-content-accent-color: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-table-header-background: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-link-color: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-link-color-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --newtab-focus-outline: var(--in-content-border-active-shadow) !important;
+ --newtab-focus-border: var(--in-content-border-focus) !important;
+ --newtab-focus-border-selected: var(--custom-accent-color) !important;
+ --newtab-textbox-focus-color: var(--in-content-border-focus) !important;
+ --newtab-primary-action-background: var(--custom-accent-color) !important;
+ --color-accent-primary: var(--custom-accent-color) !important;
+ --color-accent-primary-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --color-accent-primary-active: var(--custom-accent-color) !important;
+ --brand-color-accent: var(--custom-accent-color) !important;
+ --brand-color-accent-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --brand-color-accent-active: var(--custom-accent-color) !important;
}
- :root {
- /* accent color */
- --uc-my-color: #b8bb26;
- --uc-my-color-hover: color-mix(in oklab, var(--uc-my-color) 90%, white);
- --uc-my-color-active: color-mix(in oklab, var(--uc-my-color) 80%, white);
-
- --color-accent-primary: var(--uc-my-color) !important;
- --color-accent-primary-hover: var(--uc-my-color-hover) !important;
- --color-accent-primary-active: var(--uc-my-color-active) !important;
-
- --in-content-primary-button-background: var(--uc-my-color) !important;
- --in-content-primary-button-background-hover: var(--uc-my-color-hover) !important;
- --in-content-primary-button-background-active: var(--uc-my-color-active) !important;
-
- --primary-button-background-color: var(--uc-my-color) !important;
- --primary-button-hover-background-color: var(--uc-my-color-hover) !important;
- --primary-button-active-background-color: var(--uc-my-color-active) !important;
-
- /* background color */
- --uc-my-background-color: #32302F;
- --background-color-canvas: var(--uc-my-background-color) !important;
- --background-color-box: var(--uc-my-background-color) !important;
-
- /* text color */
- --in-content-page-color: #fbf1c7 !important;
+}
+
+@-moz-document url("chrome://global/content/commonDialog.xhtml") {
+ #commonDialog[subdialog] checkbox {
+ --checkbox-checked-bgcolor: var(--custom-accent-color, #fabd2f) !important;
+ --checkbox-checked-hover-bgcolor: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --checkbox-checked-active-bgcolor: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important;
}
}
+
+.topsite-form .form-wrapper input[type="text"]:focus-visible {
+ outline: none !important;
+ border-color: var(--newtab-focus-border) !important;
+}
+
+.showPrivate .search-handoff-button.focused {
+ outline: 0;
+ border: 1px solid var(--newtab-focus-border) !important;
+ box-shadow: 0 0 0 2px var(--newtab-focus-outline) !important;
+}
+
+::-moz-progress-bar {
+ background-color: var(--custom-accent-color, #fabd2f) !important;
+}
+
+login-filter {
+ --in-content-primary-button-background: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important;
+}
+
+::selection {
+ color: #282828 !important;
+ background: #fabd2f !important;
+}
diff --git a/userContent.css b/userContent.css
@@ -14,17 +14,17 @@ body, html {
:root {
/* custom accent color to be used across Firefox*/
/* use hexcode or color name */
- --custom-accent-color: #d3869b;
+ --custom-accent-color: #f5c2e7;
/* background color */
- --uc-my-background-color: #1d2021 !important;
+ --uc-my-background-color: #181825 !important;
--background-color-canvas: var(--uc-my-background-color) !important;
--background-color-box: var(--uc-my-background-color) !important;
/* text color */
- --in-content-page-color: #ebdbb2 !important;
+ --in-content-page-color: #cdd6f4 !important;
- --table-row-background-color-alternate:#282828 !important;
+ --table-row-background-color-alternate:#1e1e2e !important;
/* color of the tab dividers / separators */
@@ -34,7 +34,7 @@ body, html {
@-moz-document regexp("^(about:).*") {
body {
- background-color: #1d2021 !important;
+ background-color: #181825 !important;
}
}
@@ -47,45 +47,45 @@ body, html {
html:not([role="dialog"]) body.activity-stream,
window:not([chromehidden]),
window:not([chromehidden])>dialog {
- --surface-1: #1d2021 !important;
- --surface-2: #1d2021 !important;
+ --surface-1: #181825 !important;
+ --surface-2: #181825 !important;
--accent-surface-1: #ebcb8b !important;
--dashboard-tab-active-ink: #ebcb8b !important;
- --in-content-primary-button-background: var(--custom-accent-color, #fabd2f) !important;
- --in-content-primary-button-background-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
- --in-content-primary-button-background-active: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important;
-
- --in-content-item-selected: var(--custom-accent-color, #fabd2f) !important;
- --in-content-border-highlight: var(--custom-accent-color, #fabd2f) !important;
- --in-content-border-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
- /* --in-content-border-focus: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important; */
- --in-content-border-focus: var(--custom-accent-color, #fabd2f) !important;
- --in-content-border-active: var(--custom-accent-color, #fabd2f) !important;
- --in-content-border-active-shadow: var(--custom-accent-color, #fabd2f) !important;
+ --in-content-primary-button-background: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important;
+
+ --in-content-item-selected: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-highlight: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ /* --in-content-border-focus: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important; */
+ --in-content-border-focus: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-active: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-border-active-shadow: var(--custom-accent-color, #f5c2e7) !important;
--in-content-category-outline-focus: 1px solid transparent !important;
- --in-content-accent-color: var(--custom-accent-color, #fabd2f) !important;
- --in-content-table-header-background: var(--custom-accent-color, #fabd2f) !important;
- --in-content-link-color: var(--custom-accent-color, #fabd2f) !important;
- --in-content-link-color-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --in-content-accent-color: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-table-header-background: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-link-color: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-link-color-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
--newtab-focus-outline: var(--in-content-border-active-shadow) !important;
--newtab-focus-border: var(--in-content-border-focus) !important;
--newtab-focus-border-selected: var(--custom-accent-color) !important;
--newtab-textbox-focus-color: var(--in-content-border-focus) !important;
--newtab-primary-action-background: var(--custom-accent-color) !important;
--color-accent-primary: var(--custom-accent-color) !important;
- --color-accent-primary-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --color-accent-primary-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
--color-accent-primary-active: var(--custom-accent-color) !important;
--brand-color-accent: var(--custom-accent-color) !important;
- --brand-color-accent-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
+ --brand-color-accent-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
--brand-color-accent-active: var(--custom-accent-color) !important;
}
}
@-moz-document url("chrome://global/content/commonDialog.xhtml") {
#commonDialog[subdialog] checkbox {
- --checkbox-checked-bgcolor: var(--custom-accent-color, #fabd2f) !important;
- --checkbox-checked-hover-bgcolor: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
- --checkbox-checked-active-bgcolor: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important;
+ --checkbox-checked-bgcolor: var(--custom-accent-color, #f5c2e7) !important;
+ --checkbox-checked-hover-bgcolor: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --checkbox-checked-active-bgcolor: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important;
}
}
@@ -101,16 +101,16 @@ body, html {
}
::-moz-progress-bar {
- background-color: var(--custom-accent-color, #fabd2f) !important;
+ background-color: var(--custom-accent-color, #f5c2e7) !important;
}
login-filter {
- --in-content-primary-button-background: var(--custom-accent-color, #fabd2f) !important;
- --in-content-primary-button-background-hover: color-mix(in srgb, #282828 50%, var(--custom-accent-color, #fabd2f)) !important;
- --in-content-primary-button-background-active: color-mix(in srgb, #282828 65%, var(--custom-accent-color, #fabd2f)) !important;
+ --in-content-primary-button-background: var(--custom-accent-color, #f5c2e7) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, #1e1e2e 50%, var(--custom-accent-color, #f5c2e7)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, #1e1e2e 65%, var(--custom-accent-color, #f5c2e7)) !important;
}
::selection {
- color: #282828 !important;
- background: #fabd2f !important;
+ color: #1e1e2e !important;
+ background: #f5c2e7 !important;
}
