From 3ad88bc817b3369282e68dd1155694621d36ef6f Mon Sep 17 00:00:00 2001 From: Niklas Gollenstede Date: Fri, 15 Jun 2018 13:52:55 -0400 Subject: [PATCH] FF61 compat, use more vars, use settings --- custom-inversion.css | 196 +++++++++++++++++++++---- developer-edition-dark.css | 283 +++++++++++++++---------------------- netflix-video-zoom.css | 22 +++ sidebars-dark.css | 6 +- 4 files changed, 312 insertions(+), 195 deletions(-) create mode 100644 netflix-video-zoom.css diff --git a/custom-inversion.css b/custom-inversion.css index 34bfe1e..78c2dd1 100644 --- a/custom-inversion.css +++ b/custom-inversion.css @@ -24,6 +24,68 @@ * @include name level4 * title Invert `body>*>*>*ยด * description Invert all grandgrandchildren of the <body> element. + * + * @include name pdfJs + * title Invert PDFs + * description Inverts all PDF pages of Firefox' PDF reader. Can not exclude images. + * + * + * @option name filter-invert + * title Invert filter + * description The CSS filter value to use to invert the page content.
+ * |See + * |the documentation on MDN for possible values. + * type css-value + * + * @option name filter-revert + * title Revert filter + * description Inverse filter used to preserve the original colors of images etc.
+ * |This should revert each filter function in the invert filter in reverse order. + * type css-value + * + * @option name revert-default + * title Default un-invert + * description Display <img>, <video> and <iframe> + * |elements with their original colors. + * type bool + * off not:not(not) + * + * @option name revert + * title Elements to un-invert + * type css-selector-multi + * description Elements that, in addition to <img>, <video> + * |and <iframe>, are to be displayed un-inverted, + * |that is, with their original colors. + * + * @option name unset + * title Elements to keep inverted + * type css-selector-multi + * description <img>, <video> or <iframe> elements, + * |or elements matched by the above selector, + * |that should be kept inverted. + * + * @option name c-white + * title Elements with white text + * type css-selector-multi + * description Elements whose text color will be forced to white. + * @option name c-black + * title Elements with black text + * type css-selector-multi + * description Elements whose text color will be forced to black. + * + * @option name bg-white + * title Elements with white background + * type css-selector-multi + * description Elements whose background color will be forced to white. + * @option name bg-black + * title Elements with black background + * type css-selector-multi + * description Elements whose background color will be forced to black. + */ + +/** + * Implementation notes: + * - :not([mozdisallowselectionprint=""]) excludes PDF.js */ @@ -33,25 +95,45 @@ :root { /* the filter value that is used to turn the pages or their main element dark */ - --filter-invert: invert(1) hue-rotate(180deg) saturate(1.666667) brightness(1.5); + --filter-invert: /*[[!filter-invert]]*/invert(1) hue-rotate(180deg) saturate(1.666667) brightness(1.5)/*[[/filter-invert]]*/; /* reversed filter to revert individual elements like imaged back to their original */ - --filter-revert: brightness(0.666667) saturate(0.6) hue-rotate(180deg) invert(1); /* revert each filter in reverse order */ + --filter-revert: /*[[!filter-revert]]*/brightness(0.666667) saturate(0.6) hue-rotate(180deg) invert(1)/*[[/filter-revert]]*/; } /* content elements that should be displayed uninverted */ /* since the inversion should cover the entire content, these can be applied across all levels */ - img:not(:-moz-full-screen), + + /*[[!revert-default]]*/img:not(:-moz-full-screen), video:not(:-moz-full-screen), - iframe:not(:-moz-full-screen), - .gm-style, /* Google Maps */ - .emoji, .img, .thumb, .image-bg, - pre.language-css, - a.mw-wiki-logo /* media wiki */ - { filter: var(--filter-revert); } + iframe:not(:-moz-full-screen)/*[[/revert-default]]*/ + { filter: var(--filter-revert); } /* these have no children that would need to be excluded */ - html>iframe:not(:-moz-full-screen) + /*[[!revert]]*/.gm-style, /* Google Maps */ +.img, [role=img], .thumb, .icon, .image-bg, .emoji, +pre.language-css, +a.mw-wiki-logo /* media wiki *//*[[/revert]]*/ + { filter: var(--filter-revert); } /* must exclude children of these from further filters, esp. with (custom) class selectors */ + + :-moz-any(/*[[!revert]]*/.gm-style, /* Google Maps */ +.img, [role=img], .thumb, .icon, .image-bg, .emoji, +pre.language-css, +a.mw-wiki-logo /* media wiki *//*[[/revert]]*/) + :not(#qpdb) /* any id for high priority */ + { filter: unset; } /* this is probably expensive, but necessary (s.o.) */ + + /*[[!unset]]*/img[src$=".svg"]/*[[/unset]]*/ { filter: unset; } + /*[[!c-white]]*//*[[/c-white]]*/ + { color: white; } + /*[[!c-black]]*//*[[/c-black]]*/ + { color: black; } + + /*[[!bg-white]]*/#overlay:empty, .overlay:empty, iframe[src^="https://disqus.com/"]/*[[/bg-white]]*/ + { background: white; } + /*[[!bg-black]]*//*[[/bg-black]]*/ + { background: black; } + } @@ -62,17 +144,17 @@ * invert level 1 (html) */ - html:not([mozdisallowselectionprint=""]) /* exclude PDF.js */ - { background: black; } - + /* invert the target */ html:not([mozdisallowselectionprint=""]) { filter: var(--filter-invert); } - html:only-child>body:last-child>img:only-child:not(#foo) /* image view */ - { top: 50vh; } + /* ensure a black background */ + html:not([mozdisallowselectionprint=""]) + { background: black; } - html>iframe:not(:-moz-full-screen) - { filter: var(--filter-revert); } + /* fix the image-only view */ + html:only-child>body:last-child>img:only-child:not(#foo) /* image view */ + { top: 50vh; } /* the inversion of the :root messes with the positioning of the centered image */ } @@ -84,14 +166,20 @@ * invert level 2 (body>*) */ - html:not([mozdisallowselectionprint=""]), /* exclude PDF.js */ - html:not([mozdisallowselectionprint=""])>body - { background: black; } - + /* invert the target */ html:not([mozdisallowselectionprint=""])>body>* { filter: var(--filter-invert); } - html>body>img:not(#foo), /* avoid inverting images and frames */ + /* ensure a black background */ + html:not([mozdisallowselectionprint=""]), + html:not([mozdisallowselectionprint=""])>body + { background: black; } + + /* keep elements whose parents aren't inverted unchanged */ + html>img:not(#foo), + html>video:not(#foo), + html>iframe:not(#foo), + html>body>img:not(#foo), html>body>video:not(#foo), html>body>iframe:not(#foo) { filter: unset; } @@ -106,13 +194,30 @@ * invert level 3 (body>*>*) */ - html:not([mozdisallowselectionprint=""]), /* exclude PDF.js */ + /* invert the target */ + html:not([mozdisallowselectionprint=""])>body>*>* + { filter: var(--filter-invert); } + + /* ensure a black background */ + html:not([mozdisallowselectionprint=""]), html:not([mozdisallowselectionprint=""])>body, html:not([mozdisallowselectionprint=""])>body>* { background: black; } - html:not([mozdisallowselectionprint=""])>body>*>* - { filter: var(--filter-invert); } + html>iframe:not(:-moz-full-screen) + { filter: unset; } + + /* keep elements whose parents aren't inverted unchanged */ + html>img:not(#foo), + html>video:not(#foo), + html>iframe:not(#foo), + html>body>img:not(#foo), + html>body>video:not(#foo), + html>body>iframe:not(#foo) + html>body> * >img:not(#foo), + html>body> * >video:not(#foo), + html>body> * >iframe:not(#foo) + { filter: unset; } } @@ -124,13 +229,50 @@ * invert level 4 (body>*>*>*) */ - html:not([mozdisallowselectionprint=""]), /* exclude PDF.js */ + /* invert the target */ + html:not([mozdisallowselectionprint=""])>body>*>*>* + { filter: var(--filter-invert); } + + /* ensure a black background */ + html:not([mozdisallowselectionprint=""]), html:not([mozdisallowselectionprint=""])>body, html:not([mozdisallowselectionprint=""])>body>*, html:not([mozdisallowselectionprint=""])>body>*>* { background: black; } - html:not([mozdisallowselectionprint=""])>body>*>*>* + /* keep elements whose parents aren't inverted unchanged */ + html>img:not(#foo), + html>video:not(#foo), + html>iframe:not(#foo), + html>body>img:not(#foo), + html>body>video:not(#foo), + html>body>iframe:not(#foo) + html>body> * >img:not(#foo), + html>body> * >video:not(#foo), + html>body> * >iframe:not(#foo) + html>body> * > * >img:not(#foo), + html>body> * > * >video:not(#foo), + html>body> * > * >iframe:not(#foo) + { filter: unset; } + +} + + +@-moz-document + regexp(pdfJs/*as:content*/) +{ + /** + * invert PDF.js + */ + + :root { + /* the filter value that is used to turn the pages or their main element dark */ + --filter-invert: /*[[!filter-invert]]*/invert(1) hue-rotate(180deg) saturate(1.666667) brightness(1.5)/*[[/filter-invert]]*/; + } + + /* invert the target */ + html:root[mozdisallowselectionprint=""]>body[tabindex="1"][class=""]>div#outerContainer + canvas { filter: var(--filter-invert); } } diff --git a/developer-edition-dark.css b/developer-edition-dark.css index 23d1d2c..fe1fd98 100644 --- a/developer-edition-dark.css +++ b/developer-edition-dark.css @@ -5,21 +5,23 @@ * @licence CC-BY-SA-4.0 or MIT * @description * Slight rework of the dark Developer Edition theme of Firefox. - * Also works in normal Firefox and even Thunderbird. + * Requires Firefox' dark theme, preferably with compact density. + * Also works in Thunderbird. * * If you have any issues with this style, please open a ticket at https://github.com/NiklasGollenstede/stylish */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -/* - * context menu - */ @-moz-document url-prefix(chrome://), url-prefix(about:), url-prefix(resource://) { + /* + * context menu + */ + menupopup { filter: invert(100%) hue-rotate(180deg); padding: 1px; @@ -31,12 +33,13 @@ } -/** - * desktop notifications (windows) - */ @-moz-document url(chrome://global/content/alerts/alert.xul) { + /** + * desktop notifications (windows) + */ + #alertBox>:not(image), image { filter: invert(100%) hue-rotate(180deg); } toolbarbutton image @@ -48,159 +51,142 @@ } -/** - * main windows - */ @-moz-document url(chrome://messenger/content/messenger.xul), url(chrome://browser/content/browser.xul) { + /** + * main windows + */ /* * vars */ :root { - --tab-line-color: #C75600; - --chrome-secondary-background-color: #39424D; - --chrome-color: white; - } + /* general */ + --chrome-color: /*[[!text-color]]*/white/*[[/text-color]]*/; + --chrome-secondary-background-color: /*[[!background-color]]*/#39424D/*[[/background-color]]*/; + --lwt-text-color: var(--chrome-color); + --tab-line-color: /*[[!tab-line]]*/#C75600/*[[/tab-line]]*/; + --tab-line-color: white; + + /* panels */ + --arrowpanel-color: var(--chrome-color); + --arrowpanel-background: /*[[!panel-prim-bg]]*/#171B1F/*[[/panel-prim-bg]]*/; + --arrowpanel-dimmed: /*[[!panel-sec-bg]]*/#1D2328/*[[/panel-sec-bg]]*/; + + /* url and search bar */ + --lwt-toolbar-field-background-color: var(--arrowpanel-dimmed); + --lwt-toolbar-field-border-color: var(--arrowpanel-dimmed); + --toolbar-field-focus-border-color: /*[[!urlbar-highlight]]*/#955/*[[/urlbar-highlight]]*/; + --autocomplete-popup-color: var(--chrome-color); + --autocomplete-popup-background: var(--arrowpanel-background); + + /* custom vars */ + --ded-tab-border-color: #777; + --ded-inacitve-tab-bg: #7773; + --ded-min-tab-width: 200px; + } /* no literal colors from here on */ /* * tabs */ - window[sizemode=maximized] #navigator-toolbox - { margin-top: 0px; } - window #navigator-toolbox - { margin-top: 1px; } - window[uidensity=compact] - { --tab-min-height: 31px; } - - #TabsToolbar { - margin-bottom: 0px; - } - - tab[pending] { - opacity: 0.6; + tab:not([selected]) { + background: var(--ded-inacitve-tab-bg); } - tab:not([pending]):not([selected]) .tab-background { - background: #7773; + #tabbrowser-tabs { + --tab-line-color: inherit; } - tab[selected] .tab-background { border-style: solid; border-width: 0 1px; - border-image: linear-gradient(to bottom, #C75600 3px, #777 3px, #777 100%, transparent 100%) 1 100%; + border-image: linear-gradient(to bottom, + var(--identity-tab-color, var(--tab-line-color)) 3px, + var(--ded-tab-border-color) 3px + ) 1 100%; } + tab[selected]::after /* border between tabs */ + { visibility: hidden; } - tab:not([pinned]) { - transition: none; + /* dim not-loaded tabs */ + tab[pending]>* { /* apply to children to avoid reducing the opacity of the ::after element botder */ + /*[[!pending-tab-style]]*/opacity: 0.6; /* gray out by 40% */ +background: black;/*[[!pending-tab-style]]*/ } - tab[selected]:not([pinned]) { - min-width: 200px; - } - - tab[pinned] .tab-content { - padding: 0 2px 0 10px; - } - tab[pinned][busy] .tab-content { - padding: 0 9px 0 10px; - } - tab[pinned]::before { /*left border */ - display: none; - } - - .tab-line - { height: 2px; } - .tab-bottom-line - { transform: translateY(-.5px); } - - .tab-icon-image { - padding: 5px; - margin-right: 2px; - margin-left: -5px; - width: 26px; - height: 26px; - background: radial-gradient(white 20%, transparent 75%); - } + /* increase width of non-pinned selected tabs */ + tab:not([pinned]) + { /* transition: none; */ } /* must not disable transition (firefox removes the [movingtab] attribute at its end) */ + tab[selected]:not([pinned]) + { min-width: var(--ded-min-tab-width); } + /* make the close button a little larger, esp. for touch devices */ .tab-close-button { - height: 24px; - width: 28px; - margin: -2px -10px 0 0; - } - tab:not([selected]) .tab-close-button { - display: none; + height: 24px; width: 24px; + margin: -0px -6px 0 0; } - #TabsToolbar[movingtab] { - margin-bottom: -16px; + /* put a spotlicht under the favicons, which are mostly designed for light backgrounds */ + 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 + { margin-right: 2px; } + + tab .tab-line + { background-color: var(--identity-tab-color, var(--tab-line-color)); } + tab:not([selected]):hover .tab-line + { opacity: 0.675; } /* * navbar */ + /* insert gray border between tabs and navbar */ #nav-bar-customization-target { margin-top: -1px; } #nav-bar, .mail-toolbox { - border-top: 1px solid #777; + border-top: 1px solid var(--ded-tab-border-color); margin-top: -1px; box-shadow: none; } - - .searchbar-textbox, - #urlbar, - #searchInput { - border: 1px solid #1D2328 !important; - background-color: #1D2328 !important; - color: white; + #TabsToolbar[movingtab] + #nav-bar { + margin-top: -16px; /* [movingtab] adds 15px padding to the #TabsToolbar */ } - #browser-panel>#navigator-toolbox>#nav-bar>#nav-bar-customization-target .searchbar-textbox[focused], - #browser-panel>#navigator-toolbox>#nav-bar>#nav-bar-customization-target #urlbar[focused] - { border: 1px solid #955 !important; } /* move reload button into url-bar (must be placed just right of the url-bar) */ - #urlbar-container { - margin-right: -30px; +/*[[!reload-left]]*/ + #urlbar-container { + margin-right: -26px; } - #urlbar-container .urlbar-textbox-container { - margin-right: 27px; + #urlbar-container .urlbar-textbox-container { + margin-right: 26px; } - #urlbar-container + toolbaritem { + #urlbar-container + toolbaritem { transform: translateX(-6px); } #urlbar-container + toolbaritem image { - border-radius: 0; - } - - /* pretty sure this is gone */ - /* #urlbar #notification-popup-box { - background: #171B1F !important; - } */ - - #PopupAutoComplete, - #PopupSearchAutoComplete, - #PopupAutoCompleteRichResult, - #PopupGlodaAutocomplete { - filter: invert(100%) hue-rotate(180deg); - background-color: white; + padding: 4px; + border-radius: 0 2px 2px 0; + width: calc(2 * var(--toolbarbutton-inner-padding) + 12px); + height: calc(2 * var(--toolbarbutton-inner-padding) + 12px); } - - #PopupAutoComplete image, - #PopupSearchAutoComplete image, - #PopupAutoCompleteRichResult image, - #PopupGlodaAutocomplete image { - filter: invert(100%) hue-rotate(180deg); + #urlbar-container + toolbaritem image:hover { /* this doesn't work ... */ + background-color: hsla(0,0%,70%,.2); /* hard coded value in firefox' default style */ } +/*[[/reload-left]]*/ - #navigator-toolbox::after { display: none; } /* bottom border */ + /* remove border below UI */ + #navigator-toolbox::after { display: none; } /* @@ -208,13 +194,13 @@ */ #sidebar-splitter { - border-color: #39424D; /* inspector body color filtered */ + border-color: var(--chrome-secondary-background-color); } #sidebar-header { - color: white; - background-color: #39424D; /* inspector body color filtered */ + color: var(--chrome-color); + background-color: var(--chrome-secondary-background-color); margin: -1px 0; - padding: 2px 8px 1px 8px; + padding: 1px 2px 2px 3px; } #sidebar-switcher-target { padding: 0 4px; @@ -225,56 +211,19 @@ * panels */ - /* .popup-notification-panel, */ - #customization-lwtheme-menu, - #widget-overflow, - #PanelUI-popup, - #downloadsPanel, - #identity-popup, - #notification-popup, - #appMenu-notification-popup, - #sidebarMenu-popup, - #customization-panelWrapper - { filter: invert(100%) hue-rotate(180deg); } - - #PanelUI-multiView, - #PanelUI-multiView panelview, - #identity-popup-multiView, - #BMB_bookmarksPopup .panel-arrowcontent, - #downloadsPanel .panel-arrowcontent, - #appMenu-notification-popup .panel-arrowcontent, - #sidebarMenu-popup .panel-arrowcontent, - #customization-panelWrapper .panel-arrowcontent - { background-color: #E6E9EC; /* inspector body color filtered */ } - - #customization-content-container - { background: black; } - - #widget-overflow image, - #downloadsPanel .downloadTypeIcon, - #PanelUI-popup toolbarbutton[id$="-browser-action"] .toolbarbutton-icon - { filter: invert(100%) hue-rotate(180deg); } - #PopupSearchAutoComplete .search-panel-current-engine { display: none; } - tooltip, - statuspanel[type="overLink"], - menupopup { - filter: invert(100%) hue-rotate(180deg); - padding: 1px; - } - - /* * plugin notification */ - notification[value="plugin-hidden"], + /* notification[value="plugin-hidden"], */ /* what exactly is this? */ #fullscreen-warning { display: none; } + /* displlay banner notifications hovering over the top of the page, instead of pushing it down */ .notificationbox-stack { position: fixed; } @@ -283,46 +232,48 @@ * content */ + /* prevent white flashes before content browser is initialized */ tabbrowser#content, browser[type="content"]:not([transparent]) { background: black; } + tooltip, /* title attribute hover text */ + #statuspanel[type="overLink"] /* url href preview at window bottom */ + { filter: invert(100%) hue-rotate(180deg); } + /* * tab modal dialogs */ - tabmodalprompt>* { - position: fixed; - left: 10px; - right: 10px; - top: 80px; - bottom: 10px; + /* make it dark and cover the whole page */ + tabmodalprompt { + filter: invert(100%) hue-rotate(180deg); + background-color: transparent; + display: block; position: relative; + } + tabmodalprompt>spacer + { display: none; } + tabmodalprompt>hbox { + display: block; + width: 100%; height: 100%; } tabmodalprompt .mainContainer { - background-color: transparent; - position: relative; - width: 100%; - height: 100%; - color: black; + width: 100%; height: 100%; + background-color: rgba(198, 197, 206, .85); border: none; - z-index: 100; } - /* main text */ - tabmodalprompt .topContainer>*>*>:nth-child(2) { + tabmodalprompt .infoBody { background-color: rgba(230, 233, 236, .93); padding: 5px 10px 5px 10px; } - tabmodalprompt { - filter: invert(100%) hue-rotate(180deg); - background-color: rgba(198, 197, 206, .85); - } } @-moz-document url(chrome://messenger/content/messenger.xul) { + /* TODO: add fixes for Thunderbird 60 */ .mail-toolbox toolbarbutton { color: white !important; diff --git a/netflix-video-zoom.css b/netflix-video-zoom.css new file mode 100644 index 0000000..3569961 --- /dev/null +++ b/netflix-video-zoom.css @@ -0,0 +1,22 @@ +/** ==UserStyle== + * @name Netflix Video Zoom + * @author Niklas Gollenstede + * @license MIT + * @description + * + * + * @option name zoom + * title Zoom + * type number + * min 100 + * max 200 + */ + +@-moz-document + url-prefix("https://www.netflix.com/watch/") +{ + video { + transform: scale(calc(/*[[!zoom]]*/120/*[[/zoom]]*//100)); + transform-origin: center center; + } +} diff --git a/sidebars-dark.css b/sidebars-dark.css index 117de2b..668356e 100644 --- a/sidebars-dark.css +++ b/sidebars-dark.css @@ -12,8 +12,10 @@ */ @-moz-document - url(chrome://browser/content/bookmarks/bookmarksPanel.xul), - url(chrome://browser/content/history/history-panel.xul), + url(chrome://browser/content/bookmarks/bookmarksPanel.xul), /* <= FF61 */ + url(chrome://browser/content/places/bookmarksSidebar.xul), /* >= FF61 */ + url(chrome://browser/content/history/history-panel.xul), /* <= FF61 */ + url(chrome://browser/content/places/historySidebar.xul), /* >= FF61 */ url(chrome://browser/content/syncedtabs/sidebar.xhtml) { image, *|img,