Add userContent.css

chrome/userContent.css

@@ -0,0 +1,5 @@
+@-moz-document url("about:newtab"), url("about:home"){
+    body{
+      background-color: var(--cust-accent) !important;
+    }
+  }

scraps.css

@@ -0,0 +1,467 @@
+/* 
+.titlebar-spacer[type="pre-tabs"]  {
+	display: none !important;
+}
+
+#TabsToolbar {
+  background-color: var(--toolbar-bgcolor) !important; 
+}
+
+.tab-background:is([selected], [multiselected]) {
+  background-color: var(--toolbox-non-lwt-bgcolor) !important;
+  
+  &:-moz-window-inactive {
+   background-color: var(--toolbox-non-lwt-bgcolor-inactive) !important;
+  }
+}
+
+.browser-toolbar {
+  background-color: var(--toolbox-non-lwt-bgcolor) !important;
+
+  &:-moz-window-inactive {
+    background-color: var(--toolbox-non-lwt-bgcolor-inactive) !important;
+    color: var(--toolbox-non-lwt-textcolor-inactive);
+  }
+}
+
+maingreen=
+var(--toolbox-non-lwt-bgcolor)
+ActiveCaption
+-moz-headerbar
+
+darkgreen=
+var(--toolbox-non-lwt-bgcolor-inactive)
+InactiveCaption
+-moz-headerbarinactive
+
+grey=
+var(--toolbar-non-lwt-bgcolor)
+var(--toolbar-bgcolor)
+var(--tab-selected-bgcolor);
+color-mix(in srgb, -moz-dialog 85%, white)
+*/
+
+
+
+/* 
+.titlebar-spacer[type="pre-tabs"]  {
+	display: none !important;
+}
+
+#TabsToolbar {
+  background-color: var(--toolbar-bgcolor) !important; 
+}
+
+.tab-background:is([selected], [multiselected]) {
+  background-color: var(--toolbox-non-lwt-bgcolor) !important;
+  
+  &:-moz-window-inactive {
+   background-color: var(--toolbox-non-lwt-bgcolor-inactive) !important;
+  }
+}
+
+.browser-toolbar {
+  background-color: var(--toolbox-non-lwt-bgcolor) !important;
+
+  &:-moz-window-inactive {
+    background-color: var(--toolbox-non-lwt-bgcolor-inactive) !important;
+    color: var(--toolbox-non-lwt-textcolor-inactive);
+  }
+}
+
+maingreen=
+var(--toolbox-non-lwt-bgcolor)
+ActiveCaption
+-moz-headerbar
+
+darkgreen=
+var(--toolbox-non-lwt-bgcolor-inactive)
+InactiveCaption
+-moz-headerbarinactive
+
+grey=
+var(--toolbar-non-lwt-bgcolor)
+var(--toolbar-bgcolor)
+var(--tab-selected-bgcolor);
+color-mix(in srgb, -moz-dialog 85%, white)
+
+
+
+
+
+
+ private colors 
+
+:root {
+  accent-color: pink !important;
+}
+
+#main-window[privatebrowsingmode="temporary"] {
+
+  --cust-accent: color-mix(in srgb, purple 30%, black);
+  --cust-accent-dark: color-mix(in srgb, purple 20%, black);
+  --cust-accent-light: color-mix(in srgb, purple 60%, black);
+  --cust-accent-text: color-mix(in srgb, purple 50%, white);
+
+  #TabsToolbar {
+      background-color: var(--cust-accent-light) !important;
+  }
+  
+  #titlebar,
+  .browser-toolbar,
+  .tab-background:is([selected], [multiselected]) {
+      background-color: var(--cust-accent) !important;
+
+      &:-moz-window-inactive {
+          opacity: .75 !important;
+      }
+  }
+  
+  #urlbar-background,
+  #appMenu-multiView,
+  #searchbar {
+      background-color: var(--cust-accent-dark) !important;
+      border: 1px solid var(--cust-accent-dark) !important;
+
+  }
+  .urlbarView-row:is([selected]) {
+      background-color: var(--cust-accent-light) !important;
+  }
+
+  .urlbarView-url {
+      color: var(--cust-accent-text) !important;
+  }
+
+}
+
+
+/* 
+
+#main-window {
+  --cust-accent: color-mix(in srgb, var(--toolbox-non-lwt-bgcolor) 50%, black);
+  --cust-accent-light: var(--toolbox-non-lwt-bgcolor);
+  --cust-accent-dark: color-mix(in srgb, var(--toolbox-non-lwt-bgcolor) 40%, black);
+  --cust-accent-text: color-mix(in srgb, var(--toolbox-non-lwt-bgcolor) 50%, white);
+
+  #TabsToolbar,
+  .urlbarView-row:is([selected]),
+  ::-moz-selection {
+      background-color: var(--cust-accent-light) !important;
+  }
+  
+  #titlebar,
+  .browser-toolbar,
+  .tab-background:is([selected], [multiselected]) {
+      background-color: var(--cust-accent) !important;
+
+      &:-moz-window-inactive {
+          opacity: .75 !important;
+      }
+  }
+  
+  #urlbar-background,
+  #appMenu-multiView,
+  #searchbar {
+      outline: none !important;
+      border: none !important;
+      background-color: var(--cust-accent-dark) !important;
+  }
+
+  .urlbarView-url {
+      color: var(--cust-accent-text) !important;
+  }
+
+}
+
+
+#main-window[privatebrowsingmode="temporary"] {
+
+  --cust-accent: color-mix(in srgb, purple 30%, black);
+  --cust-accent-dark: color-mix(in srgb, purple 20%, black);
+  --cust-accent-light: color-mix(in srgb, purple 60%, black);
+  --cust-accent-text: color-mix(in srgb, purple 50%, white);
+
+  #TabsToolbar,
+  .urlbarView-row:is([selected]),
+  ::-moz-selection {
+      background-color: var(--cust-accent-light) !important;
+  }
+  
+  #titlebar,
+  .browser-toolbar,
+  .tab-background:is([selected], [multiselected]) {
+      background-color: var(--cust-accent) !important;
+
+      &:-moz-window-inactive {
+          opacity: .75 !important;
+      }
+  }
+  
+  #urlbar-background,
+  #appMenu-multiView,
+  #searchbar {
+      outline: none !important;
+      border: none !important;
+      background-color: var(--cust-accent-dark) !important;
+  }
+
+  .urlbarView-url {
+      color: var(--cust-accent-text) !important;
+  }
+
+}
+
+
+#main-window:has(#userContext-icons:not([hidden])) .identity-color-turquoise {
+    
+  --cust-tabbar-jj: color-mix(in srgb, turquoise 60%, black); 
+  --cust-toolbox-jj: color-mix(in srgb, turquoise 30%, black); 
+  --cust-toolbox-dark-jj: color-mix(in srgb, turquoise 20%, black);
+  #TabsToolbar {
+    background-color: var(--cust-tabbar-jj) !important;
+  }
+
+  .browser-toolbar, 
+  .urlbar,
+  .tab-background:is([selected], [multiselected]) {
+    background-color: var(--cust-toolbox-jj) !important;
+
+    &:-moz-window-inactive {
+      background-color: var(--cust-toolbox-jj) !important;
+    }
+  }
+
+  #urlbar-background,
+  #searchbar {
+    background-color: var(--cust-toolbox-dark-jj) !important;
+  }
+}
+
+
+
+
+
+
+.titlebar-spacer[type="pre-tabs"]  {
+	display: none !important;
+}
+
+#TabsToolbar {
+  background-color: var(--toolbar-bgcolor) !important; 
+}
+
+.tab-background:is([selected], [multiselected]) {
+  background-color: var(--toolbox-non-lwt-bgcolor) !important;
+  
+  &:-moz-window-inactive {
+   background-color: var(--toolbox-non-lwt-bgcolor-inactive) !important;
+  }
+}
+
+.browser-toolbar {
+  background-color: var(--toolbox-non-lwt-bgcolor) !important;
+
+  &:-moz-window-inactive {
+    background-color: var(--toolbox-non-lwt-bgcolor-inactive) !important;
+    color: var(--toolbox-non-lwt-textcolor-inactive);
+  }
+}
+
+maingreen=
+var(--toolbox-non-lwt-bgcolor)
+ActiveCaption
+-moz-headerbar
+
+darkgreen=
+var(--toolbox-non-lwt-bgcolor-inactive)
+InactiveCaption
+-moz-headerbarinactive
+
+grey=
+var(--toolbar-non-lwt-bgcolor)
+var(--toolbar-bgcolor)
+var(--tab-selected-bgcolor);
+color-mix(in srgb, -moz-dialog 85%, white)
+*/
+
+
+
+
+
+/*
+#main-window:has(.tabbrowser-tab[selected].identity-color-turquoise) {
+  --cust-accent: color-mix(in srgb, turquoise 60%, black);
+  --cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
+  --cust-accent-darker: color-mix(in srgb, var(--cust-accent) 30%, black);
+  --cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);
+
+  #TabsToolbar,
+  .urlbarView-row:is([selected]),
+  ::-moz-selection {
+      background-color: var(--cust-accent) !important;
+  }
+
+  #titlebar,
+  .browser-toolbar,
+  .tab-background:is([selected], [multiselected]) {
+      background-color: var(--cust-accent-dark) !important;
+
+      &:-moz-window-inactive {
+          opacity: .75 !important;
+      }
+  }
+
+  #urlbar-background,
+  #appMenu-multiView,
+  #searchbar {
+      outline: none !important;
+      border: none !important;
+      background-color: var(--cust-accent-darker) !important;
+  }
+
+  .urlbarView-url {
+      color: var(--cust-accent-text) !important;
+  }
+
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-orange) {
+  --cust-accent: color-mix(in srgb, orange 60%, black);
+  --cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
+  --cust-accent-darker: color-mix(in srgb, var(--cust-accent) 30%, black);
+  --cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);
+
+  #TabsToolbar,
+  .urlbarView-row:is([selected]),
+  ::-moz-selection {
+      background-color: var(--cust-accent) !important;
+  }
+
+  #titlebar,
+  .browser-toolbar,
+  .tab-background:is([selected], [multiselected]) {
+      background-color: var(--cust-accent-dark) !important;
+
+      &:-moz-window-inactive {
+          opacity: .75 !important;
+      }
+  }
+
+  #urlbar-background,
+  #appMenu-multiView,
+  #searchbar {
+      outline: none !important;
+      border: none !important;
+      background-color: var(--cust-accent-darker) !important;
+  }
+
+  .urlbarView-url {
+      color: var(--cust-accent-text) !important;
+  }
+
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-blue) {
+  --cust-accent: color-mix(in srgb, blue 60%, black);
+  --cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
+  --cust-accent-darker: color-mix(in srgb, var(--cust-accent) 30%, black);
+  --cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);
+
+  #TabsToolbar,
+  .urlbarView-row:is([selected]),
+  ::-moz-selection {
+      background-color: var(--cust-accent) !important;
+  }
+
+  #titlebar,
+  .browser-toolbar,
+  .tab-background:is([selected], [multiselected]) {
+      background-color: var(--cust-accent-dark) !important;
+
+      &:-moz-window-inactive {
+          opacity: .75 !important;
+      }
+  }
+
+  #urlbar-background,
+  #appMenu-multiView,
+  #searchbar {
+      outline: none !important;
+      border: none !important;
+      background-color: var(--cust-accent-darker) !important;
+  }
+
+  .urlbarView-url {
+      color: var(--cust-accent-text) !important;
+  }
+
+}
+
+
+
+#main-window:has(#userContext-icons:not([hidden])[tooltiptext="JJ"]) {
+  --cust-tabbar-jj: color-mix(in srgb, turquoise 60%, black);
+  --cust-toolbox-jj: color-mix(in srgb, turquoise 30%, black);
+  --cust-toolbox-dark-jj: color-mix(in srgb, turquoise 20%, black);
+
+  #TabsToolbar {
+    background-color: var(--cust-tabbar-jj) !important;
+  }
+
+  .browser-toolbar,
+  .urlbar,
+  .tab-background:is([selected], [multiselected]) {
+    background-color: var(--cust-toolbox-jj) !important;
+
+    &:-moz-window-inactive {
+      background-color: var(--cust-toolbox-jj) !important;
+    }
+  }
+
+  #urlbar-background,
+  #searchbar {
+    background-color: var(--cust-toolbox-dark-jj) !important;
+  }
+}
+
+:root:has(.tabbrowser-tab[selected].identity-color-turquoise) {
+
+  --cust-accent: color-mix(in srgb, turquoise 60%, black);
+  --cust-accent-dark: color-mix(in srgb, turquoise 30%, black);
+  --cust-accent-darker: color-mix(in srgb, turquoise 20%, black);
+
+  color-scheme: dark !important;
+
+  #TabsToolbar {
+    background-color: var(--cust-accent) !important;
+  }
+
+  .browser-toolbar,
+  .urlbar,
+  .tab-background:is([selected], [multiselected]) {
+
+    background-color: var(--cust-accent-dark) !important;
+
+  }
+
+  #urlbar-background,
+  #searchbar {
+    background-color: var(--cust-accent-darker) !important;
+  }
+
+  #navigator-toolbox {
+    border-bottom: none !important;
+  }
+
+}
+ */
+
+
+
+
+
+
+
+
+*/
+