diff --git a/about-pages-dark.css b/about-pages-dark.css index be05b26..f7a399c 100644 --- a/about-pages-dark.css +++ b/about-pages-dark.css @@ -3,9 +3,7 @@ * @author Niklas Gollenstede * @license CC-BY-SA-4.0 or MIT * @description - * Addition to Firefox Quantum's default dark color theme, turns all about:-pages (truly) dark. - * This works mostly with inversion filters, so it should not be affected by future changes to those pages too much, - * but it also means that it will un-darken any about:-pages that are already dark (due to other user styles, add-ons, system themes, ...). + * In addition to Firefox Quantum's default dark color theme, turns all (remaining) about:-pages (truly) dark. * * The CSS is clearly structured and documented, read that for details on what happens to which page. * @@ -22,6 +20,48 @@ { :root { --filter-invert: invert(1) hue-rotate(180deg) saturate(1.666) brightness(1.5); /* the filter value that is used to turn the pages or their main element dark */ --filter-revert: brightness(0.666) saturate(.6) hue-rotate(180deg) invert(1); /* reversed filter to revert individual elements like imaged back to their original, revert each filter in reverse order */ + + /* Most of these are the default values: */ + + --in-content-page-background: #14171A; /*changed*/ + --in-content-page-color: rgb(249, 249, 250); + --in-content-text-color: var(--in-content-page-color); + --in-content-deemphasized-text: var(--grey-40); + --in-content-box-background: #252c33; /*changed*/ + --in-content-box-background-hover: rgba(249,249,250,0.15); + --in-content-box-background-active: rgba(249,249,250,0.2); + --in-content-box-background-odd: rgba(249,249,250,0.05); + --in-content-box-info-background: rgba(249,249,250,0.15); + + --in-content-border-color: rgba(249,249,250,0.2); + --in-content-border-hover: rgba(249,249,250,0.3); + --in-content-box-border-color: rgba(249,249,250,0.2); + + --in-content-button-background: rgba(249,249,250,0.1); + --in-content-button-background-hover: rgba(249,249,250,0.15); + --in-content-button-background-active: rgba(249,249,250,0.2); + + --in-content-category-background-hover: rgba(249,249,250,0.1); + --in-content-category-background-active: rgba(249,249,250,0.15); + --in-content-category-background-selected-hover: rgba(249,249,250,0.15); + --in-content-category-background-selected-active: rgba(249,249,250,0.2); + + --in-content-table-background: #252c33; /*changed*/ + --in-content-table-border-dark-color: rgba(249,249,250,0.2); + --in-content-table-header-background: #002b57; + --in-content-dialog-header-background: rgba(249,249,250,0.05); + + --in-content-category-text-selected: var(--blue-40); + --in-content-category-text-selected-active: var(--blue-50); + --in-content-link-color: var(--blue-40); + --in-content-link-color-hover: var(--blue-50); + --in-content-link-color-active: var(--blue-60); + + --in-content-tab-color: var(--in-content-page-color); + + --card-outline-color: var(--grey-60); + + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); } } /** @@ -29,50 +69,44 @@ * about:-pages, most of these are linked on 'about:about': * * ftp:// : generic, - * about: : generic, - * about:about : generic, - * about:accounts : generic, - * about:addons : vertical-tabs, specific, + * about:about : // already dark + * about:addons : // already dark * about:blank : specific, * about:buildconfig : generic, * about:cache : generic, - * about:certerror?... : generic, + * about:certerror?... : // already dark * about:checkerboard : generic, - * about:config?... : generic, - * about:crashes : generic, + * about:config?... : // already dark + * about:crashes : // already dark * about:credits : // redirects to "https://www.mozilla.org/credits/" (see below) * about:debugging : vertical-tabs, * about:devtools-toolbox : // not useful (probably embedded somewhere ?) - * about:downloads : generic, + * about:downloads : // already dark * about:healthreport : // only contains an iframe from "https://fhr.cdn.mozilla.net/en-US/v4/" - * about:license : generic, + * about:license : // already dark * about:logo : // just an image * about:memory : generic, * about:mozilla : // is deep red anyway - * about:neterror?... : generic, - * about:networking : vertical-tabs, + * about:neterror?... : // already dark + * about:networking : // already dark (?) * about:newtab : specific, - * about:performance : generic, + * about:performance : // already dark * about:plugins : generic, - * about:preferences#... : vertical-tabs, + * about:preferences#... : // already dark * about:privatebrowsing : // already dark * about:profiles : generic, - * about:restartrequired : generic, - * about:rights : generic, - * about:robots : generic, + * about:restartrequired : // already dark + * about:rights : // already dark + * about:robots : // already dark * about:serviceworkers : generic, - * about:sessionrestore : generic, specific, - * about:sessionstore : generic, // from add-on - * about:support : generic, - * about:studies : generic, + * about:sessionrestore : specific, + * about:support : // already dark + * about:studies : // already dark * about:sync-log : generic, - * about:sync-progress : // has been removed - * about:sync-tabs : // has been removed - * about:tabcrashed?... : generic, - * about:tabgroups#... : vertical-tabs, // from add-on - * about:telemetry : generic, + * about:tabcrashed?... : // already dark + * about:telemetry : // already dark * about:webrtc : generic, - * about:welcomeback : generic, + * about:welcomeback : // already dark * * Related pages: * @@ -82,37 +116,15 @@ /* generic: invert :root, un-invert images */ @-moz-document regexp("^ftp://.*/"), - url(about:), - url(about:about), - url(about:accounts), url(about:buildconfig), url(about:cache), - url-prefix(about:certerror), url(about:checkerboard), - url-prefix(about:config), - url(about:crashes), - url(about:downloads), - url(about:license), + url-prefix(about:debugging), url(about:memory), - url-prefix(about:neterror), - url(about:performance), url(about:plugins), - url(about:profiles), - url(about:permissions), - url(about:restartrequired), - url(about:rights), - url(about:robots), url(about:serviceworkers), - url(about:sessionrestore), - url(about:sessionstore), - url-prefix(about:studies), - url(about:support), url(about:sync-log), - url(about:sync-tabs), - url-prefix(about:tabcrashed), - url(about:telemetry), url(about:webrtc), - url(about:welcomeback), url(https://www.mozilla.org/credits/) { :root @@ -122,85 +134,6 @@ { filter: var(--filter-revert); } } -/* vertical-tabs: invert the content area, leave tab-bar as is */ -@-moz-document - url-prefix(about:debugging), - url-prefix(about:networking), - url-prefix(about:preferences), - url-prefix(about:tabgroups), - url-prefix(about:addons) -{ - #nav-header, - .navigation, #category-box, #categories { - background-color: #424f5a; - border-radius: 0; - } - - #categories .category, - .sidebar-footer-button { - transition: background .5s; - color: #eee; - padding-inline-start: 15px; /* compensate the 4px border */ - border-radius: 0; - margin: 0; - background: inherit; - } - - #categories .category:hover, - #categories .sidebar-footer-button:hover - { background: #9994; } - - #categories .category[selected], /*xul*/ - #categories .category.selected { /*html*/ - background-color: rgb(52, 63, 72); - color: var(--in-content-category-text-selected); - padding-inline-start: 11px; /* compensate the 4px border */ - border-inline-start: solid 4px var(--in-content-border-highlight); - } - - #categories .category[selected]:hover, - #categories .category.selected:hover - { background-color: #1A2533; } - - .main-content, /* content area */ - #main-footer, /* ??? */ - #dialogBox /* modal dialogs frame */ - { filter: var(--filter-invert); background-color: white; } - - .main-content image, #dialogBox image, .main-content img, #dialogBox img, /* images in inverted areas */ - #dialogFrame /* modal dialog contents, contains another document */ - { filter: var(--filter-revert); } - - .dialogBox - { background-color: #14171A; } - .dialogTitleBar - { background-color: #131213; color: lightgrey; } -} - -/* specific: mostly the same as vertical-tabs, but excludes the inline add-on options frames */ -@-moz-document - url-prefix(about:addons) -{ - .main-content /* content area */ - { filter: unset; background-color: black; } - - #header, - #headered-views-content>:not(#detail-view), /* all view types except #detail-view */ - #detail-view .detail-view-container>*>*>:not(#detail-grid), #detail-grid #detail-rows>:not(#addon-options-prompts-stack) /* bascically everything except #addon-options (the inversion of that makes it entirely black) */ - { filter: var(--filter-invert); } - - #detail-view .detail-view-container>*>*>image:not(#detail-grid) - { filter: unset; } - - .main-content image, .main-content img /* images in inverted areas */ - { filter: var(--filter-revert); } - - #addon-options - { background: white; } - .card.addon-detail - { background: black; } -} - /* specific: only apply to empty about:blank documents */ @-moz-document url(about:blank) diff --git a/about-reader-dark.css b/about-reader-dark.css index c75d337..db6e9a5 100644 --- a/about-reader-dark.css +++ b/about-reader-dark.css @@ -39,4 +39,9 @@ { display: none !important; } + + .narrating + { + background-color: black !important; + } } diff --git a/developer-edition-dark.css b/developer-edition-dark.css index 9624d01..a6cc228 100644 --- a/developer-edition-dark.css +++ b/developer-edition-dark.css @@ -54,6 +54,7 @@ @-moz-document url(chrome://messenger/content/messenger.xul), + url(chrome://browser/content/browser.xhtml), url(chrome://browser/content/browser.xul) { /** @@ -95,13 +96,13 @@ * tabs */ - tab:not([selected]) { + .tabbrowser-tab:not([selected]) { background: var(--ded-inacitve-tab-bg); } #tabbrowser-tabs { --tab-line-color: inherit; } - tab[selected] .tab-background { + .tabbrowser-tab[selected] .tab-background { border-style: solid; border-width: 0 1px; border-image: linear-gradient(to bottom, @@ -109,22 +110,22 @@ var(--ded-tab-border-color) 3px ) 1 100%; } - tab[selected]::after /* border between tabs */ + .tabbrowser-tab[selected]::after /* border between tabs */ { visibility: hidden; } /* dim not-loaded tabs */ - tab[pending]>* { /* apply to children to avoid reducing the opacity of the ::after element border */ + .tabbrowser-tab[pending]>* { /* apply to children to avoid reducing the opacity of the ::after element border */ /*[[!pending-tab-style]]*/opacity: 0.6; /* gray out by 40% */ background: black;/*[[!pending-tab-style]]*/ } /* increase width of non-pinned selected tabs */ - tab:not([pinned]) { + .tabbrowser-tab:not([pinned]) { /* transition: none; */ /* must not disable transition (firefox removes the [movingtab] attribute at its end) */ !transition-timing-function: linear, linear; !transition-duration: .1s, .1s; } - tab[selected]:not([pinned]) + .tabbrowser-tab[selected]:not([pinned]) { min-width: var(--ded-min-tab-width); } /* make the close button a little larger, esp. for touch devices */ @@ -134,18 +135,18 @@ background: black;/*[[!pending-tab-style]]*/ } /* put a spotlicht under the favicons, which are mostly designed for light backgrounds */ - tab .tab-icon-image { + .tabbrowser-tab .tab-icon-image { background: radial-gradient(white 20%, transparent 75%); padding: 5px; width: 26px; height: 26px; margin-right: -5px; margin-left: -5px; } - tab:not([pinned]) .tab-icon-image + .tabbrowser-tab:not([pinned]) .tab-icon-image { margin-right: 2px; } - tab .tab-line + .tabbrowser-tab .tab-line { background-color: var(--identity-tab-color, var(--tab-line-color)); } - tab:not([selected]):hover .tab-line + .tabbrowser-tab:not([selected]):hover .tab-line { opacity: 0.675; } diff --git a/google-inverted.css b/google-inverted.css index 87202b3..5eeaa65 100644 --- a/google-inverted.css +++ b/google-inverted.css @@ -55,4 +55,6 @@ .irc_bg img { filter: unset; } + /* the filtering somehow hides the privacy consent modal, which also prevents scrolling */ + .nsc { overflow: initial; } } diff --git a/mozilla-org-inverted.css b/mozilla-org-inverted.css index 67c38f3..78a775e 100644 --- a/mozilla-org-inverted.css +++ b/mozilla-org-inverted.css @@ -16,7 +16,7 @@ domain("firefox.com"), regexp("^https?://(?!metrics)[^/]*\\.mozilla\\.com(/.*)?$"), domain("mozilla.net"), - regexp("^https?://(?!www|air|services\\.addons)[^/]*\\.mozilla\\.org(/.*)?$"), /* keep |hacks ? */ + regexp("^https?://(?!www|air|services\\.addons|bugzilla)[^/]*\\.mozilla\\.org(/.*)?$"), /* keep |hacks ? */ domain("addons.mozilla.org"), /* explicitly list this to include this block privileged chrome style */ domain("kb.mozillazine.org") {