ESR Light Mode – userContent.css

/* -------------------------------------------------------------- */
/*  v2.1.1-C  ||  Firefox ESR || v78.3.0esr  || HighValueDayGame  */
/* -------------------------------------------------------------- */

/* ============================================================== */
/* >>>>>>>>>>>>>    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(226,226,226) !important;
color: rgb(80,80,80) !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(226,226,226) !important;
color: rgb(60,60,60) !important;
}

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

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

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

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

.contentSearchHeader:hover {                                     /* Search engine and "Change Search Settings" text, HOVER */
background-color: rgb(192,192,192) !important;
color: rgb(0,0,0) !important;
border-color: rgb(192,192,192) !important;
}

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

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

.icon {
display: none !important;
}

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

:root {

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

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

--in-content-box-background: rgb(226,226,226) !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(102,102,102) !important;          /* check boxes - border on hover */
--in-content-border-hover: rgb(102,102,102) !important;          /* search boxes - hover */
--in-content-border-active: rgb(172,172,172) !important;         /* search boxes - active */
--in-content-border-active-shadow: none !important;              /* search boxes - shadow */

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

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

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

                                                                 /* text selected left-hand side */
--in-content-category-text-selected: rgb(60,60,60) !important;            /* static */
--in-content-category-text-selected-active: rgb(48,48,48) !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,110,230) !important;              /* links */
--in-content-link-color:  rgb(0,110,230) !important;
--in-content-link-color-hover:  rgb(0,110,230) !important;
--in-content-link-color-active: rgb(0,110,230) !important;
--in-content-link-color-visited: rgb(0,110,230) !important;

--link-color:  rgb(0,90,220) !important;

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

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

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

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

menulist > menupopup > menuitem:not([disabled="true"])[selected="true"] {
color: rgb(32,32,32) !important;
background-color: rgb(200,200,200) !important;
}

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

#categories > .category[selected], #categories > .category.selected {
color: rgb(0,110,230) !important;
background-color: rgb(226,226,226) !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(192,192,192) !important;
color: rgb(32,32,32) !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(80,80,80) !important;
}

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

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

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

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

#downloadFolder {
filter: grayscale(25%) !important;
}

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

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

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

tree {
filter: grayscale(25%) !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(25%) !important;                               /* icon default search engine */
}

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

.content-blocking-category.selected {                            /* background of mode selected Standard/Strict/Custom */
border: 1px solid rgb(102,102,102) !important;
background-color: rgba(144,144,144, 0.2) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.default-button:enabled:hover {
background: rgb(180,180,180) !important;
}
.default-button {
color: rgb(60,60,60) !important;
background-color: rgb(192,192,192) !important;
}

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

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

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

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

.primary-button:enabled {
color: rgb(60,60,60) !important;
background-color: rgb(192,192,192) !important;
}
.primary-button:enabled:hover {
color: rgb(60,60,60) !important;
background: rgb(180,180,180) !important;
}

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

}