ESR Dark Mode – userContent.css

/* -------------------------------------------------------------- */
/*  v4.1.2-C  ||  Firefox ESR || v78.3.1esr  || HighValueDayGame  */ /* ==================================== v4.1.2-C */
/* -------------------------------------------------------------- */

/* ============================================================== */
/* >>>>>>>>>>>>>    OPTIONAL USER CUSTOMIZATION      <<<<<<<<<<<< */
/* ============================================================== */

/* -------------------------------------------------------------- */
/* 1. In the url bar type:  about:debugging#/runtime/this-firefox */
/*                                                                */
/* 2. Copy each "Internal UUID" of the add-ons you want to change */
/*                                                                */
/* 3. Below, replace each "Internal UUID" with each string you    */
/*    copied at step 2.                                           */
/* -------------------------------------------------------------- */

@-moz-document url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/"),
               url-prefix("moz-extension://Internal UUID/") {

body {
background-color: rgb(48,48,48) !important;
color: rgb(192,192,192) !important;
}

}

/* ============================================================== */
/* >>>>>>>>>>>    END OF OPTIONAL CUSTOMIZATION      <<<<<<<<<<<< */
/* ============================================================== */

@-moz-document url(about:blank), url(about:home), url(about:newtab),
url(about:preferences), url(about:preferences#general), url(about:preferences#home),
url(about:preferences#search), url(about:preferences#privacy), url(about:preferences#sync),
url(about:addons), url(about:config), url(about:debugging#addons), url(about:logins),
url(about:debugging#/runtime/this-firefox), url(about:debugging#/setup),
url-prefix("chrome://passwordmgr/content/passwordManager.xhtml"),

url-prefix("chrome://mozapps/content/preferences/dialogschangemp.xhtml"),

url-prefix("chrome://pippki/content/certManager.xhtml"),
url-prefix("chrome://pippki/content/device_manager.xhtml"),
url-prefix("chrome://mozapps/content/update/history.xhtml"),
url-prefix("chrome://mozapps/content/extensions/aboutaddons.html"),
url-prefix("chrome://browser/content/preferences/dialogs/colors.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/fonts.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/languages.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/connection.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/containers.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/permissions.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/clearSiteData.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/sitePermissions.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/browserLanguages.xhtml"),
url-prefix("chrome://browser/content/preferences/dialogs/siteDataSettings.xhtml") {

/* -------------------------------------------------------------- */
/* New page                                                       */
/* -------------------------------------------------------------- */

body {                                                           /* Window background and text colour*/
background-color: rgb(32,32,32) !important;
color: rgb(220,220,220) !important;
}

.search-wrapper .logo-and-wordmark .wordmark {                   /* "Firefox" text */
fill: rgb(200,200,200) !important;
}

#newtab-search-text {                                            /* Search box */
background-color: rgb(52,52,52) !important; 
color: rgb(200,200,200) !important;
}

#newtab-search-text:focus { 
border: 1px solid rgb(48,48,48) !important; 
box-shadow: 0px 0px 0px 2px rgba(48,48,48,1)  !important;
}

.contentSearchHeader {                                           /* Search engine and "Change Search Settings" text */
background-color: rgb(52,52,52) !important;
color: rgb(200,200,200) !important;
border-color: rgb(132,132,132) !important;
}

.contentSearchHeader:hover {                                     /* Search engine and "Change Search Settings" text, HOVER */
background-color: rgb(72,72,72) !important;                      /* ==================================== v4.1.2-C */
color: rgb(200,200,200) !important;                              /* ==================================== v4.1.2-C */
border-color: rgb(132,132,132) !important;
}

.contentSearchSuggestionEntry {                                  /* Search results */
color: rgb(200,200,200) !important;
background-color: rgb(52,52,52) !important;
}

.contentSearchSuggestionEntry:hover {                            /* Search results, HOVER */
background-color: rgb(72,72,72) !important;                      /* ==================================== v4.1.2-C */
color: rgb(200,200,200) !important;                              /* ==================================== v4.1.2-C */
}

.icon {
display: none !important;
}

.contentSearchSuggestionTable
.contentSearchOneOffsTable
.contentSearchSuggestionsContainer {                             /* other search engines, background */
background-color: rgb(52,52,52) !important;                      /* ==================================== v4.1.2-C */
}

.contentSearchSuggestionTable
.contentSearchSuggestionsContainer {                             /* border between search results and other search engines */                     
border: none !important;                                         /* ==================================== v4.1.2-C */
}

.contentSearchOneOffItem.selected {                              /* other search engines, background HOVER */
background-color: rgb(72,72,72) !important;                      /* ==================================== v4.1.2-C */
}

.contentSearchSuggestionTable
.contentSearchSearchWithHeaderSearchText {                       /* Search for XXX with */
color: rgb(200,200,200) !important;                              /* ==================================== v4.1.2-C */
}

.contentSearchSuggestionTable .contentSearchOneOffItem {         /* other search engines, lateral borders HOVER */ 
border: none !important;                                         /* ==================================== v4.1.2-C */
}

.search-wrapper input, .search-wrapper .search-button {          /* lateral symbols */
fill: rgb(144,144,144) !important;                               /* ==================================== v4.1.2-C */
}

/* -------------------------------------------------------------- */
/* Service pages                                                  */
/* -------------------------------------------------------------- */

:root {

background-color: rgb(32,32,32) !important;

--in-content-page-color: rgb(220,220,220) !important;            /* texts */
--in-content-deemphasized-text: rgb(220,220,220) !important;
--in-content-page-background: rgb(32,32,32) !important;          /* background */
--in-content-text-color: rgb(220,220,220) !important;            /* titles and side lists */

--in-content-box-background: rgb(52,52,52) !important;           /* search boxes and check boxes */
--in-content-box-border-color: rgb(144,144,144) !important;      /* border - static - search & check boxes*/
--in-content-border-focus: rgb(169,169,169) !important;          /* check boxes - border on hover */
--in-content-border-hover: rgb(169,169,169) !important;          /* search boxes - hover */
--in-content-border-active: rgb(80,80,80) !important;            /* search boxes - active */
--in-content-border-active-shadow: none !important;              /* search boxes - shadow */

--in-content-box-background-hover: rgb(80,80,80) !important;     /* top row "One-Click Search Engines" */
--in-content-item-hover: rgb(80,80,80) !important;               /* hover on items in "One-Click Search Engines" */

--in-content-border-color: rgb(128,128,128) !important;          /* border of disabled items and horizontal lines */

--in-content-border-highlight: rgb(128,128,128) !important;      /* border of selected tab in Extensions/Options, Privacy/Certificates, etc. */

                                                                 /* text selected left-hand side */
--in-content-category-text-selected: rgb(120,220,190) !important;         /* static */
--in-content-category-text-selected-active: rgb(120,220,190) !important;  /* on-click */
--in-content-category-background-selected-hover: none !important;         /* background on hover */
--in-content-category-background-selected-active: none !important;        /* background selected */
--in-content-category-outline-focus: none !important;                     /* border when going out of selection */

                                                                 /* text NOT selected left-hand side */
--in-content-category-background-hover: none !important;                  /* background on hover */
--in-content-category-background-active: none !important;                 /* background selected */

--in-content-tab-color: rgb(0,100,0) !important;                 /* links */
--in-content-link-color:  rgb(120,220,190) !important;
--in-content-link-color-hover:  rgb(120,220,190) !important;
--in-content-link-color-active: rgb(120,220,190) !important;
--in-content-link-color-visited: rgb(120,220,190) !important;

--link-color:  rgb(120,220,190) !important;

--in-content-button-background: rgb(56,56,56) !important;        /* buttons */
--in-content-button-background-hover: rgb(72,72,72) !important;
--in-content-button-background-active: rgb(56,56,56) !important;

--in-content-dialogtitle-background: rgb(56,56,56) !important;   /* header open dialog windows */
--in-content-dialogtitle-border: rgb(128,128,128) !important;    /* horizontal border */
--in-content-warning-container: rgb(80,80,80) !important;        /* background items on the main page */

                                                                 /* buttons in Extension */
--in-content-primary-button-background: rgb(128,128,128) !important;
--in-content-primary-button-background-hover: rgb(144,144,144) !important;
--in-content-primary-button-background-active: rgb(128,128,128) !important;

--in-content-item-selected: rgb(80,80,80) !important;
}

menulist > menupopup > menuitem:not([disabled="true"])[selected="true"] { /* items in a list e.g. search engines */
color: rgb(0,0,0) !important;
background-color: rgb(128,128,128) !important;
}

/* -------------------------------------------------------------- */
/* Items left-hand side */

#categories > .category[selected], #categories > .category.selected {
color: rgb(120,220,190) !important;
background-color: rgb(32,32,32) !important;
border-radius: 3px !important;
}

#categories > .category[selected]:hover, #categories > .category.selected:hover {
background-color: none !important;
}

#categories > .category:hover {
background-color: none !important;
}

/* -------------------------------------------------------------- */

richlistitem[selected="true"] {                                  /* items selected in a list */
background-color: rgb(102,102,102) !important;
color: rgb(220,220,220) !important;
}

.checkbox-check {
filter: grayscale(100%) !important;                              /* square check boxes */
}

.radio-check {                                                   /* round check boxes */
filter: grayscale(100%) !important;
}
xul|*.radio-check {
background-color: none !important;
}

input[type="radio"], input[type="checkbox"] {
filter: grayscale(100%) !important;
}

.content-blocking-icon, .permission-icon,
.content-blocking-category .checkbox-label-box,
.extra-information-label > image, .arrowhead,
.content-blocking-info-image, .reload-tabs-button,
.content-blocking-warning-image {
-moz-context-properties: fill;
fill: rgb(220,220,220) !important;
}

/* -------------------------------------------------------------- */
/* Preferences / General */

.face-smile {
filter: grayscale(100%) !important;
}

.extension-controlled-icon {
filter: grayscale(100%) !important;
}

.typeIcon, .actionIcon, .actionsMenu .menulist-icon {
filter: grayscale(100%) !important;
}

#downloadFolder {
filter: grayscale(100%);
}

/* -------------------------------------------------------------- */
/* Preferences / Search */

.searchBarImage {
filter: grayscale(100%) !important;
}

treecol:not([hideheader="true"]), treecolpicker {                /* one-click search engines */
background-color: rgb(52,52,52) !important;
color: rgb(220,220,220) !important;
}

tree {
filter: grayscale(100%) !important;                              /* icons one-click search engines */
}

.menuitem-iconic, .menu-iconic, menuitem[image] {
filter:grayscale(25%) !important;
}

.userContext-icon {                                              /* container icons */
filter:grayscale(25%) !important;
}

.menulist-label-box {
filter: grayscale(100%) !important;                              /* icon default search engine */
}

/* -------------------------------------------------------------- */
/* Preferences / Privacy */

.content-blocking-category.selected {      
border: 1px solid rgb(144,144,144) !important;
background-color: rgba(120,220,190,0.3) !important;
}

.content-blocking-warning {
background-color: rgba(169,169,169,0.2) !important;
}

tab[visuallyselected] {                                          /* Certificates */
color: rgb(220,220,220) !important;
}
tab[selected] {
background-color: rgb(56,56,56) !important;
}
tab {
color: rgb(220,220,220) !important;
}
tab:hover {
background-color: rgb(72,72,72) !important;
}

.extra-information-label > image,
.content-blocking-warning-image {                                /* symbols */
fill: rgb(40,40,40) !important;
}

/* -------------------------------------------------------------- */
/* Extensions */

.addon-description {
color: rgb(220,220,220) !important;;
}

.addon-detail-row {
color: rgb(220,220,220) !important;;
}

.addon.card:hover {
box-shadow: var(--card-shadow), 0 0 0 2px rgb(144,144,144) !important;
}

.card-heading-icon {
filter:grayscale(25%) !important;
}

input[type="checkbox"].toggle-button:checked:hover {
border-color: rgb(102,102,102) !important;
}

input[type="checkbox"].toggle-button:enabled:hover {
border-color: rgb(102,102,102) !important;
}

/* -------------------------------------------------------------- */
/* about:debugging#addons */

.card {
background-color: rgb(48,48,48) !important;
}

.undecorated-link, .undecorated-link:hover {
color: rgb(220,220,220) !important;
}

.fieldpair__description {
color: rgb(220,220,220) !important;
}

.fieldpair {                                                     /* horizontal borders */
border-top: 1px solid rgb(102,102,102) !important;
}

.default-button:enabled:hover {
background: rgb(72,72,72) !important;
}
.default-button {
color: rgb(220,220,220) !important;
background-color: rgb(56,56,56) !important;
}

.icon-label--info {
--icon-color: rgb(192,192,192) !important;
}

.icon-label, .sidebar__label, .sidebar-fixed-item__container {
color: rgb(220,220,220) !important;
}

.sidebar-item__link:hover {
background: rgb(32,32,32) !important;
}

.sidebar-item--selectable:hover {
background: rgb(32,32,32) !important;
}

.primary-button:enabled {
color: rgb(220,220,220) !important;
background-color: rgb(56,56,56) !important;
}
.primary-button:enabled:hover {
color: rgb(220,220,220) !important;
background-color: rgb(72,72,72) !important;
}

.default-input {
color: rgb(220,220,220) !important;
background-color: rgb(48,48,48) !important;
}

}

/* -------------------------------------------------------------- */ /* ==================================== v4.1.2-C */
/* about:protections */

@-moz-document url(about:protections) {

:root {
background-color: rgb(32,32,32) !important;
}

body {
-moz-appearance: none; !important;
background-color: rgb(32,32,32) !important;
}

#report-title, #report-summary, #protection-settings {
color: rgb(192,192,192) !important;
}

.card, .card-title, .card .content {
background-color: rgb(60,60,60) !important;
color: rgb(220,220,220) !important;
}

.tab-content p {
color: rgb(220,220,220) !important;
}

.icon {
filter: grayscale(100%)
}

#sign-up-for-monitor-link, #save-passwords-button, #legend label {
filter: grayscale(100%)
}

#tab-social:checked ~ #social, #tab-cookie:checked ~ #cookie, #tab-tracker:checked ~ #tracker, #tab-fingerprinter:checked ~ #fingerprinter, #tab-cryptominer:checked ~ #cryptominer {
filter: grayscale(100%)
}

input[data-type="social"]:checked ~ #highlight, .hover-social label[for="tab-social"] ~ #highlight-hover, label[for="tab-social"]:hover ~ #highlight-hover,
input[data-type="cookie"]:checked ~ #highlight, .hover-cookie label[for="tab-cookie"] ~ #highlight-hover, label[for="tab-cookie"]:hover ~ #highlight-hover,
input[data-type="tracker"]:checked ~ #highlight, .hover-tracker label[for="tab-tracker"] ~ #highlight-hover, label[for="tab-tracker"]:hover ~ #highlight-hover,
input[data-type="fingerprinter"]:checked ~ #highlight, .hover-fingerprinter label[for="tab-fingerprinter"] ~ #highlight-hover, label[for="tab-fingerprinter"]:hover ~ #highlight-hover,
input[data-type="cryptominer"]:checked ~ #highlight, .hover-cryptominer label[for="tab-cryptominer"] ~ #highlight-hover, label[for="tab-cryptominer"]:hover ~ #highlight-hover {
filter: grayscale(100%)
}

}