commit WIP of the last months

NiklasGollenstede · Mar 13, 2017 · ec26282 · ec26282
1 parent ef585a5
commit ec26282
Show file tree

Hide file tree

Showing 9 changed files with 671 additions and 112 deletions.
diff --git a/about-pages-dark.css b/about-pages-dark.css
@@ -2,16 +2,25 @@
  * @name about:pages Dark
  * @stylish-id 107168
  * @author Niklas Gollenstede
- * @licence CC-BY-SA-4.0 or MIT
+ * @license CC-BY-SA-4.0 or MIT
  * @description
  *     Color theme, turns all the standard and some add-on about:-pages dark.
  *     This works mostly with inversion filters, so it should not be affected by changes of those pages that 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, ...).
  *     Requests to add additional add-on about:-pages are generally welcome.
  *
  *     If you have any issues with this style, please open a ticket at https://github.com/NiklasGollenstede/stylish
+ *
+ *     It should affect every build-in about:-page that isn't already dark.
+ *     The CSS is clearly structured and documented, read that for details on what happens to which page.
  */
 
+/* set vars */
+@-moz-document url-prefix(about:) { :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 */
+} }
+
 /**
  *
  * about:-pages, most of these are linked on 'about:about':
@@ -20,9 +29,10 @@
  * about:about               : generic,
  * about:accounts            : generic,
  * about:addons              : vertical-tabs,
- * about:blank               : generic,
+ * about:blank               : specific,
  * about:buildconfig         : generic,
  * about:cache               : generic,
+ * about:certerror?...       : generic,
  * about:checkerboard        : generic,
  * about:config?...          : generic,
  * about:configmania#...     : vertical-tabs, // from add-on
@@ -45,7 +55,7 @@
  * about:performance         : generic,
  * about:plugins             : generic,
  * about:preferences#...     : vertical-tabs,
- * about:privatebrowsing     : generic,
+ * about:privatebrowsing     : // already dark
  * about:profiles            : generic,
  * about:rights              : generic,
  * about:robots              : generic,
@@ -74,9 +84,9 @@
            url(https://www.mozilla.org/credits/),
            url(about:about),
            url(about:accounts),
-           url(about:blank),
            url(about:buildconfig),
            url(about:cache),
+    url-prefix(about:certerror),
            url(about:checkerboard),
     url-prefix(about:config),
            url(about:crashes),
@@ -87,7 +97,6 @@
     url-prefix(about:neterror),
            url(about:performance),
            url(about:plugins),
-           url(about:privatebrowsing),
            url(about:profiles),
            url(about:permissions),
            url(about:rights),
@@ -103,17 +112,11 @@
            url(about:webrtc),
            url(about:welcomeback)
 {
-    :root:not(html#SandboxRoot)
-    { /* invert */
-        filter: invert(100%) hue-rotate(180deg) contrast(90%) saturate(200%) brightness(125%);
-        background-color: black;
-    }
+    :root
+    { filter: var(--filter-invert); background-color: black; }
 
-    img, image, /* image in html and xul */
-    .showPrivate /* what is this? */
-    { /* un-invert */
-        filter: invert(100%) hue-rotate(180deg) contrast(70%) saturate(50%) brightness(125%);
-    }
+    img, image /* image in html and xul */
+    { filter: var(--filter-revert); }
 }
 
 /* vertical-tabs: invert the content area, leave tab-bar as is */
@@ -128,16 +131,24 @@
 {
     .main-content, /* content area */
     #main-footer, /* ??? */
-    #dialogBox /* modal dialogs, they (usually) contain another xul document */
-    { /* invert */
-        filter: invert(100%) hue-rotate(180deg) contrast(90%) saturate(200%) brightness(125%);
-        background-color: white;
-    }
-    .main-content image, #dialogBox image, /* images in inverted areas */
-    #discover-browser /* the browser on the "Get Add-ons" tab of about:addons, currently contains a page from discovery.addons.mozilla.org, so an amo style should take care of it */
-    { /* un-invert */
-        filter: invert(100%) hue-rotate(180deg) contrast(70%) saturate(50%) brightness(125%);
-    }
+    #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 */
+    #discover-browser, /* the browser on the "Get Add-ons" tab of about:addons, currently contains a page from discovery.addons.mozilla.org, so an amo style should take care of it */
+    #dialogFrame /* modal dialog contents, contains another document */
+    { filter: var(--filter-revert); }
+}
+
+/* specific: same as generic, only that it excludes the embedded twitter iframes which use about:blank */
+@-moz-document
+    url(about:blank)
+{
+    :root:not(.SandboxRoot) /* excludes twitter iframes */
+    { filter: var(--filter-invert); background-color: black; }
+
+    :root:not(.SandboxRoot) img
+    { filter: var(--filter-revert); }
 }
 
 /* specific: invert a lot for items. Use simple invert filter to un-invert without changes */
@@ -146,14 +157,17 @@
 {
     :root { background-color: black; } /* enforce bg-color */
 
-    html, body,
+    html,
+    #searchText,
+    #searchSubmit,
+    #searchSuggestionTable
+    { filter: var(--filter-invert); }
+
+    body,
     #searchText,
     #searchSubmit,
-    #searchSuggestionTable,
     #searchSuggestionTable img
-    { /* simple invert */
-        filter: invert(100%) hue-rotate(180deg);
-    }
+    { filter: var(--filter-revert); }
 }
 
 /* specific: custom styles, no inversion */

diff --git a/amazon-inverted.css b/amazon-inverted.css
@@ -0,0 +1,82 @@
+/**
+ * @name Amazon Inverted
+ * @stylish-id 140084
+ * @author Niklas Gollenstede
+ * @license CC-BY-SA-4.0 or MIT
+ * @description
+ *     Simple dark, high-contrast 'skin' for Amazon.
+ *     Amazons HTML/CSS is frustratingly inconsistent across pages,
+ *     so the focus of this style is to invert the most important/prominent parts of the UI.
+ *     That means that black text on black background is unacceptable, but not-so-important pages may stay unchanged.
+ *     I only test this on the German version of Amazon.
+ *
+ *     If you have any issues with this style, please open a ticket at https://github.com/NiklasGollenstede/stylish
+ */
+
+@namespace url(http://www.w3.org/1999/xhtml);
+
+@-moz-document url("https://www.amazon.com/")
+{ /* use for screenshot */ }
+
+@-moz-document
+    regexp("^https?:\\/\\/www\\.amazon\\.\\w{2,3}(\\.\\w{2})?(\\/.*)?")
+{
+    /* black background */
+    #a-page,
+    body>#content
+    { background: black !important; }
+
+    /* invert content */
+    #nav-subnav, #nav-flyout-anchor, /* children of the header */
+    #a-page>div:not( /* everything except for the <header> and: */
+        .dv-dp-top-wrapper
+    )
+    { filter: invert(100%) hue-rotate(180deg) saturate(200%); }
+
+    /* un-invert images and stuff */
+    #a-page>div>header, /* sometimes (-.-) the <header> is placed inside a div */
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) .image-thumbnails,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) .iv_thumb_image,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) .acs-category-tile,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) .a-meter-bar, /* ratings bars */
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) img,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) video,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) canvas,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) iframe,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) [style*="background-image"],
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) [style*="background:url"],
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) [style*="background: url"]
+    {  filter: invert(100%) hue-rotate(180deg) saturate(50%); }
+
+    /* exclude some things from the un-inversion, because their parents arn't actually inverted */
+    .dv-dp-top-wrapper img,
+    .dv-dp-top-wrapper video,
+    .dv-dp-top-wrapper [style*=background-image],
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) img[src$=".gif"]
+    { filter: unset; }
+
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) .image-thumbnails,
+    :-moz-any(#nav-subnav, #nav-flyout-anchor, #a-page) img
+    { border-radius: 2px; }
+}
+
+
+@-moz-document
+    regexp("^https?:\\/\\/music\\.amazon\\.\\w{2,3}(\\.\\w{2})?(\\/.*)?")
+{
+
+    /* invert content */
+    #main-content-wrapper
+    { filter: invert(100%) hue-rotate(180deg) saturate(200%); }
+
+    /* un-invert images and stuff */
+    :-moz-any(#main-content-wrapper) img,
+    :-moz-any(#main-content-wrapper) video,
+    :-moz-any(#main-content-wrapper) canvas,
+    :-moz-any(#main-content-wrapper) iframe,
+    :-moz-any(#main-content-wrapper) [style*="background-image"],
+    :-moz-any(#main-content-wrapper) [style*="background:url"],
+    :-moz-any(#main-content-wrapper) [style*="background: url"]
+    {  filter: invert(100%) hue-rotate(180deg) saturate(50%); }
+
+}
diff --git a/developer-edition-dark.css b/developer-edition-dark.css
@@ -31,7 +31,7 @@
 
 /* end GLOBAL */
 
-/* alert, confirm, prompt */
+
 @-moz-document
     url(chrome://messenger/content/messenger.xul),
     url(chrome://browser/content/browser.xul)
@@ -91,29 +91,30 @@
     tab
     {
         color: white !important;
+        background-size: auto !important;
     }
 
     tab .tab-content
     {
-        background-color: #1C2126;
+        background-image: linear-gradient(180deg, #293A4380, #29333d);
     }
 
     tab[selected] .tab-content
     {
         border-style: solid;
         border-width: 0 1px;
         border-image: linear-gradient(180deg, #C75600 5px, #777 5px) 1 100%;
-        background-image: linear-gradient(180deg, #C75600 4px, #39424D 4px);
+        background-image: linear-gradient(180deg, #C75600 4px, #302F0080 4px, #39424D);
     }
     #main-window[sizemode="normal"] tab[selected] .tab-content
     {
         border-image: linear-gradient(180deg, #C75600 3px, #777 3px) 1 100%;
-        background-image: linear-gradient(180deg, #C75600 2px, #39424D 2px);
+        background-image: linear-gradient(180deg, #C75600 2px, #302F0080 2px, #39424D);
     }
 
     tab:not([selected]):hover .tab-content
     {
-        background-color: #111518;
+        background-color: #242C3380;
     }
 
     tab[selected]:not([pinned])
@@ -157,6 +158,11 @@
         background: none;
     }
 
+    #content tabpanels
+    {
+        background: black;
+    }
+
     /*
     * navbar
     */
@@ -192,7 +198,7 @@
         background: #171B1F !important;
     }
 
-    #navigator-toolbox:after
+    #navigator-toolbox::after
     { /* ~bottom-border */
         display: none;
     }
@@ -225,6 +231,7 @@
         --toolbarbutton-hover-background: #1E262D;
         --toolbarbutton-hover-bordercolor: #262E36;
         --toolbarbutton-active-background: #192126;
+        --chrome-secondary-background-color: #39424D !important;
     }
 
     /*
@@ -317,6 +324,19 @@
         filter: brightness(200%) saturate(200%) hue-rotate(0deg);
     }
 
+    tab .tab-content {
+        background-color: #1C2126;
+    }
+    tab[selected] .tab-content {
+        background-image: linear-gradient(180deg, #C75600 4px, #39424D 4px);
+    }
+    #main-window[sizemode="normal"] tab[selected] .tab-content {
+        background-image: linear-gradient(180deg, #C75600 2px, #39424D 2px);
+    }
+    tab:not([selected]):hover .tab-content {
+        background-color: #111518;
+    }
+
     tab:not([selected]) {
         margin-bottom: 2px;
     }
@@ -329,12 +349,12 @@
     }
 
     #tabbar-toolbar {
-    padding-right: 5px;
-    margin-right: -10px;
+        padding-right: 5px;
+        margin-right: -10px;
     }
 
     .mail-toolbox {
-    border-top-width: 0px !important;
+        border-top-width: 0px !important;
     }
 
 

diff --git a/dialogs-dark.css b/dialogs-dark.css
@@ -5,7 +5,7 @@
  * @licence CC-BY-SA-4.0 or MIT
  * @description
  *     Turns all build-in and some add-on Firefox and Thunderbird dialog windows dark.
- *     Background colours are inspired by the Developer Edition theme.
+ *     Background colors are inspired by the Developer Edition theme.
  *     The style uses inversion filters, so some icons (those in theechildren).
  *
  *     If you have any issues with this style, please open a ticket at https://github.com/NiklasGollenstede/stylish