From 7a20bbac7128368888ea23969b09b99e43def1bc Mon Sep 17 00:00:00 2001 From: ds6 Date: Sat, 22 Dec 2018 08:15:31 -0600 Subject: [PATCH] update firefox theming add agent stylesheet to make most pages dark (WIP) --- firefox/chrome/theme.as.css | 102 ++++++++++++++++++++++++++++++++++ firefox/chrome/userChrome.css | 6 +- 2 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 firefox/chrome/theme.as.css diff --git a/firefox/chrome/theme.as.css b/firefox/chrome/theme.as.css new file mode 100644 index 0000000..f5807bf --- /dev/null +++ b/firefox/chrome/theme.as.css @@ -0,0 +1,102 @@ +/*** Dark theme ***/ +/* inspired by https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme */ + +*|*:root { + /*TODO: eventually change to use lwt/chrome/-moz colors*/ + --in-content-page-color: #ccc !important; + --in-content-page-background: #222 !important; + --in-content-text-color: #ccc !important; + /* --in-content-selected-text: #fff; */ + --in-content-box-background: #444 !important; + --in-content-box-background-odd: #3a3a3a !important; + --in-content-box-background-hover: #555 !important; + --in-content-box-background-active: #333 !important; + --in-content-box-border-color: #777 !important; + /* --in-content-item-hover: rgba(0,149,221,0.25); */ + --in-content-item-selected: -moz-cellhighlight !important; + /* --in-content-border-highlight: #0a84ff; */ + /* --in-content-border-focus: #0a84ff; */ + --in-content-border-color: #777 !important; + /* --in-content-category-outline-focus: 1px dotted #0a84ff; */ + --in-content-category-text: #ccc !important; + --in-content-category-text-active: #c0c0c0 !important; + /* --in-content-category-text-selected: #0a84ff; */ + /* --in-content-category-text-selected-active: #0060df; */ + /* --in-content-category-background-hover: rgba(12,12,13,0.1); */ + /* --in-content-category-background-active: rgba(12,12,13,0.15); */ + /* --in-content-category-background-selected-hover: rgba(12,12,13,0.15); */ + /* --in-content-category-background-selected-active: rgba(12,12,13,0.2); */ + /* --in-content-tab-color: #424f5a; */ + --in-content-link-color: #09f !important; + --in-content-link-color-hover: #0ff !important; + --in-content-link-color-active: #0070aa !important; + --in-content-link-color-visited: #0050aa !important; + --in-content-primary-button-background: #05a !important; + --in-content-primary-button-background-hover: #0040aa !important; + --in-content-primary-button-background-active: #002070 !important; + --in-content-table-background: #444 !important; + /* --in-content-table-border-dark-color: #d1d1d1; */ + /* --in-content-table-header-background: #0a84ff; */ +} +@-moz-document url(about:debugging) { + .addon-target-container { + background: var(--in-content-box-background) !important; + } +} +@-moz-document url(about:performance) { + #subprocess-reports td { /*no table-background??*/ + background: var(--in-content-box-background) !important; + } +} +@-moz-document url(about:plugins) { + body { + background-color: var(--in-content-background-color) !important; + } +} +/*todo: RESTARTREQUIRED*/ + +/* These variable changes the scrollbars size and color. + * The scrollbars-width only has 3 acceptable values: + * auto: default OS size + * thin: half the width (will be hidden in about: pages) + * none: hidden scrollbar + */ +*|*:root { + --scrollbars-width: thin; + --scrollbars-thumb-color: #05a; + --scrollbars-track-color: #252525; + scrollbar-color: var(--scrollbars-thumb-color) var(--scrollbars-track-color) !important; + scrollbar-width: var(--scrollbars-width) !important; +} +*|* { + scrollbar-width: var(--scrollbars-width) !important; +} + +/* This should change the "not found" page image colors */ +.illustrated #errorPageContainer:not(.button-container), +#lic-info .license-header:not(a) { + filter: invert(95%) hue-rotate(200deg) +} +@-moz-document url(about:devtools) { + .left-pane { + filter: invert(95%) hue-rotate(200deg) + } +} +/* This fixes the inverted colors caused by the image filter */ +.illustrated #errorPageContainer .button-container, +.illustrated #errorPageContainer #text-container, +#lic-info .license-header p, +#lic-info .license-header h1 { + filter: invert(95%) hue-rotate(-200deg) +} + +/* View source */ +@-moz-document url-prefix(view-source:){ +html { + background: #222 !important; + color: #ccc !important} + + .attribute-name {color: #093 !important} + .start-tag, .end-tag {color: #f93 !important} + .attribute-value {color: #09f !important} +} diff --git a/firefox/chrome/userChrome.css b/firefox/chrome/userChrome.css index 52b22dc..7bd824f 100644 --- a/firefox/chrome/userChrome.css +++ b/firefox/chrome/userChrome.css @@ -6,7 +6,7 @@ * Available for use under the MIT License: * https://opensource.org/licenses/MIT */ - #PanelUI-menu-button { +#PanelUI-menu-button { -moz-binding: url("userChrome.xml#js"); } @@ -51,8 +51,7 @@ window:not([inFullscreen="true"]) #PersonalToolbar height: var(--statusbar-height); } /* Move statuspanel to bar */ -/* XXX: opacity and collapse not really needed, just - * need to remove transitions. +/* XXX: opacity and collapse not really needed, just need to remove transitions * TODO: add box shadow to left of bar * XXX: :hover doesn't fire because pointer disabled in xul? */ @@ -87,3 +86,4 @@ window:not([inFullscreen="true"]) #statuspanel[inactive] { min-width: 30px !important; max-width: 30px !important; } + -- 2.47.0