update firefox theming

add agent stylesheet to make most pages dark (WIP)

diff --git a/firefox/chrome/theme.as.css b/firefox/chrome/theme.as.css
new file mode 100644 (file)
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 52b22dca8357d0642b1423cbdb9817d5069c34d6..7bd824f441878064007c05bc5b6155be3cfe10a3 100644 (file)
--- 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
  */
  * Available for use under the MIT License:
  * https://opensource.org/licenses/MIT
  */

- #PanelUI-menu-button {
+#PanelUI-menu-button {

     -moz-binding: url("userChrome.xml#js");
 }
 
     -moz-binding: url("userChrome.xml#js");
 }
 


@@ -51,8 +51,7 @@ window:not([inFullscreen="true"]) #PersonalToolbar
     height: var(--statusbar-height);
 }
 /* Move statuspanel to bar */
     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?
  */
  * 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;
 }
     min-width: 30px !important;
     max-width: 30px !important;
 }

+