mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-04-27 15:51:06 -07:00
Fix: Fully Dark Mode - only works prefer dark
This commit is contained in:
alstjr7375
parent
78a013df56
commit
ba00e7e879
1 changed files with 43 additions and 122 deletions
165
userContent.css
165
userContent.css
|
|
@ -118,7 +118,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
/** Dark Mode Colors ********************************************************/
|
||||
/** Fully Dark Mode *********************************************************/
|
||||
/*= Fully Dark Mode - Dark Mode Colors =====================================*/
|
||||
:host,
|
||||
:root {
|
||||
--in-content-page-color: rgb(21, 20, 26);
|
||||
|
|
@ -275,128 +276,48 @@
|
|||
scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
|
||||
}
|
||||
|
||||
/* For dialogs, use a different background colour. We don't do
|
||||
* this in High Contrast mode, as we should be using system colours then.
|
||||
*/
|
||||
@media not (prefers-contrast) {
|
||||
:root[dialogroot],
|
||||
/* Also need this on dialog :hosts, or the rule above will override the
|
||||
* value for this custom property again in the shadow DOM. */
|
||||
:host(dialog) {
|
||||
--in-content-page-background: #42414d;
|
||||
/*= Fully Dark Mode - Addons.org ===========================================*/
|
||||
@-moz-document url-prefix("https://addons.mozilla.org") {
|
||||
.Page-content,
|
||||
.SecondaryHero {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
.Page-content h1,
|
||||
.Page-content h2,
|
||||
.SearchResult-link,
|
||||
.Home-SubjectShelf-link:link,
|
||||
.Home-SubjectShelf-link:visited{
|
||||
color: var(--in-content-text-color)!important
|
||||
}
|
||||
.SecondaryHero-module,
|
||||
.Card-header,
|
||||
.Card-contents,
|
||||
.CardList ul > li,
|
||||
.AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{
|
||||
background: var(--in-content-table-background) !important;
|
||||
}
|
||||
|
||||
.SecondaryHero-module-icon {
|
||||
-moz-context-properties: fill, fill-opacity !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
.SecondaryHero-message-link,
|
||||
.SecondaryHero-module-link,
|
||||
.Card-footer-link a,
|
||||
.SearchResult-link:focus,
|
||||
.SearchResult-link:hover,
|
||||
.SearchResult:hover .SearchResult-link,
|
||||
.Home-SubjectShelf-link:active,
|
||||
.Home-SubjectShelf-link:focus,
|
||||
.Home-SubjectShelf-link:hover {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
.SearchResult--meta-section {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
:host,
|
||||
:root {
|
||||
--in-content-page-color: WindowText;
|
||||
--in-content-page-background: Window;
|
||||
--in-content-deemphasized-text: GrayText;
|
||||
|
||||
--in-content-box-background: -moz-Dialog;
|
||||
--in-content-box-background-odd: -moz-Dialog;
|
||||
--in-content-box-border-color: ThreeDShadow;
|
||||
--in-content-box-info-background: -moz-Dialog;
|
||||
|
||||
--in-content-item-hover: Highlight;
|
||||
--in-content-item-hover-text: HighlightText;
|
||||
--in-content-item-selected: Highlight;
|
||||
--in-content-item-selected-text: HighlightText;
|
||||
--in-content-icon-color: -moz-DialogText;
|
||||
|
||||
--in-content-accent-color: -moz-DialogText;
|
||||
--in-content-accent-color-active: -moz-DialogText;
|
||||
|
||||
--in-content-border-hover: ThreeDShadow;
|
||||
/* This is not great, but there is no suitable keyword for this.
|
||||
* In theory, we shouldn't be conveying invalid state just with a colour
|
||||
* change... */
|
||||
--in-content-border-invalid: ThreeDShadow;
|
||||
--in-content-border-color: ThreeDShadow;
|
||||
|
||||
--in-content-link-color: -moz-nativehyperlinktext;
|
||||
--in-content-link-color-hover: -moz-nativehyperlinktext;
|
||||
--in-content-link-color-active: -moz-nativehyperlinktext;
|
||||
--in-content-link-color-visited: -moz-nativehyperlinktext;
|
||||
|
||||
--in-content-button-text-color-hover: HighlightText;
|
||||
--in-content-button-background: ButtonFace;
|
||||
--in-content-button-text-color: ButtonText;
|
||||
--in-content-button-background-hover: Highlight;
|
||||
--in-content-button-background-active: Highlight;
|
||||
|
||||
--in-content-primary-button-text-color: HighlightText;
|
||||
--in-content-primary-button-text-color-hover: ButtonText;
|
||||
--in-content-primary-button-background: Highlight;
|
||||
--in-content-primary-button-background-hover: ButtonFace;
|
||||
--in-content-primary-button-background-active: ButtonFace;
|
||||
|
||||
--in-content-danger-button-background: var(--in-content-primary-button-background);
|
||||
--in-content-danger-button-background-hover: var(--in-content-primary-button-background-hover);
|
||||
--in-content-danger-button-background-active: var(--in-content-primary-button-background-active);
|
||||
|
||||
--in-content-table-border-dark-color: ThreeDDarkShadow;
|
||||
--in-content-table-background: -moz-Dialog;
|
||||
--in-content-table-header-background: -moz-Dialog;
|
||||
--in-content-table-header-color: -moz-DialogText;
|
||||
|
||||
--dialog-warning-text-color: -moz-FieldText;
|
||||
|
||||
--checkbox-border-color: ThreeDShadow;
|
||||
--checkbox-unchecked-bgcolor: -moz-Field;
|
||||
--checkbox-unchecked-hover-bgcolor: -moz-Field;
|
||||
--checkbox-unchecked-active-bgcolor: -moz-Field;
|
||||
--checkbox-checked-bgcolor: Highlight;
|
||||
--checkbox-checked-color: HighlightText;
|
||||
--checkbox-checked-border-color: Highlight;
|
||||
--checkbox-checked-border-color-hover: Highlight;
|
||||
--checkbox-checked-hover-bgcolor: -moz-Field;
|
||||
--checkbox-checked-active-bgcolor: -moz-Field;
|
||||
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("https://addons.mozilla.org") {
|
||||
.Page-content,
|
||||
.SecondaryHero {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
.Page-content h1,
|
||||
.Page-content h2,
|
||||
.SearchResult-link,
|
||||
.Home-SubjectShelf-link:link,
|
||||
.Home-SubjectShelf-link:visited{
|
||||
color: var(--in-content-text-color)!important
|
||||
}
|
||||
.SecondaryHero-module,
|
||||
.Card-header,
|
||||
.Card-contents,
|
||||
.CardList ul > li,
|
||||
.AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:focus, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:hover{
|
||||
background: var(--in-content-table-background) !important;
|
||||
}
|
||||
|
||||
.SecondaryHero-module-icon {
|
||||
-moz-context-properties: fill, fill-opacity !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
.SecondaryHero-message-link,
|
||||
.SecondaryHero-module-link,
|
||||
.Card-footer-link a,
|
||||
.SearchResult-link:focus,
|
||||
.SearchResult-link:hover,
|
||||
.SearchResult:hover .SearchResult-link,
|
||||
.Home-SubjectShelf-link:active,
|
||||
.Home-SubjectShelf-link:focus,
|
||||
.Home-SubjectShelf-link:hover {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
.SearchResult--meta-section {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue