Add userContent.css

chrome/bkspl/colors_container.css

@@ -1,70 +0,0 @@
-/* container colors */
-
-#main-window:has(.tabbrowser-tab[selected][class*="identity-color-"]) {
-  --cust-accent: color-mix(in srgb, var(--container-color) 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: .85 !important;
-      }
-  }
-  
-  #urlbar-background,
-  #searchbar,
-  .panel-viewcontainer {
-      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) {
-  --container-color: dodgerblue;
-}
-
-#main-window:has(.tabbrowser-tab[selected].identity-color-turquoise) {
-  --container-color: turquoise;
-}
-
-#main-window:has(.tabbrowser-tab[selected].identity-color-green) {
-  --container-color: green;
-}
-
-#main-window:has(.tabbrowser-tab[selected].identity-color-yellow) {
-  --container-color: gold;
-}
-
-#main-window:has(.tabbrowser-tab[selected].identity-color-orange) {
-  --container-color: orange;
-}
-
-#main-window:has(.tabbrowser-tab[selected].identity-color-red) {
-  --container-color: firebrick;
-}
-
-#main-window:has(.tabbrowser-tab[selected].identity-color-pink) {
-  --container-color: pink;
-}
-
-#main-window:has(.tabbrowser-tab[selected].identity-color-purple) {
-  --container-color: purple;
-}
-

chrome/bkspl/colors_main.css

@@ -1,37 +0,0 @@
-/* main colors */
-
-#main-window {
-  --cust-accent: AccentColor;
-  --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: .85 !important;
-      }
-  }
-  
-  #urlbar-background,
-  #searchbar,
-  .panel-viewcontainer {
-      outline: none !important;
-      border: none !important;
-      background-color: var(--cust-accent-darker) !important;
-  }
-
-  .urlbarView-url {
-      color: var(--cust-accent-text) !important;
-  }
-
-}

chrome/bkspl/colors_private.css

@@ -1,37 +0,0 @@
-/* private colors */
-
-#main-window[privatebrowsingmode="temporary"] {
-  --cust-accent: color-mix(in srgb, purple 60%, black);
-  --cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
-  --cust-accent-darker: color-mix(in srgb, var(--cust-accent) 35%, 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: .85 !important;
-      }
-  }
-  
-  #urlbar-background,
-  #searchbar,
-  .panel-viewcontainer {
-      outline: none !important;
-      border: none !important;
-      background-color: var(--cust-accent-darker) !important;
-  }
-
-  .urlbarView-url {
-      color: var(--cust-accent-text) !important;
-  }
-
-}

chrome/bkspl/linux.css

@@ -1,14 +0,0 @@
-@import 'colors_main.css';
-@import 'colors_private.css';
-@import 'colors_container.css';
-
-/* hide */
-
-#alltabs-button,
-.titlebar-spacer[type="pre-tabs"] {
-  display: none !important;
-}
-
-#navigator-toolbox {
-  border-bottom: none !important;
-}

chrome/bkspl/windows.css

@@ -1,26 +0,0 @@
-@import 'colors_private.css';
-@import 'colors_container.css';
-
-/* Padding */
-#TabsToolbar {
-	min-height: 52px !important;
-}
-
-/* Hide spacer */
-#alltabs-button,
-.titlebar-spacer[type="pre-tabs"] {
-  display: none !important;
-}
-
-/* Container Color overrides */
-:root:has(.tabbrowser-tab[selected][class*="identity-color-"]), .tabbrowser-tab:has(.tabbrowser-tab[selected][class*="identity-color-"]) {
-  menupopup, panel, .tabbrowser-tab, .browser-toolbar {
-    color: white !important;
-    color-scheme: dark !important;
-  }
-
-  #navigator-toolbox {
-    border-bottom: none !important;
-  }
-}
-

chrome/userChrome.css

@@ -1,2 +1,131 @@
-/* @import 'bkspl/linux.css'; */
-/* @import 'bkspl/windows.css'; */
+/* HIDE */
+/* Left spacer */
+#alltabs-button,
+.titlebar-spacer[type="pre-tabs"] {
+  display: none !important;
+}
+
+/* Bottom divider */
+#navigator-toolbox {
+  border-bottom: none !important;
+}
+
+/* Windows overrides */
+@media (-moz-platform: windows) {
+
+  /* Top margin for AHK */
+  #TabsToolbar {
+    min-height: 52px !important;
+  }
+}
+
+/* APPLY COLORS */
+/* Tab bar and inactive tabs */
+#TabsToolbar,
+.urlbarView-row:is([selected]),
+::-moz-selection {
+  background-color: var(--cust-accent) !important;
+
+  &:-moz-window-inactive {
+    background-color: var(--cust-accent-inactive) !important;
+  }
+}
+
+/* Navbar and active tab */
+#titlebar,
+.browser-toolbar,
+.tab-background:is([selected], [multiselected]) {
+  background-color: var(--cust-accent-dark) !important;
+
+  &:-moz-window-inactive {
+    opacity: .85 !important;
+  }
+}
+
+/* Menus and dropdowns */
+#urlbar-background,
+#searchbar,
+.panel-viewcontainer {
+  outline: none !important;
+  border: none !important;
+  background-color: var(--cust-accent-darker) !important;
+}
+
+/* URLbar */
+.urlbarView-url,
+.urlbarView-action,
+.urlbarView-favicon {
+  color: var(--cust-accent-text) !important;
+}
+
+#urlbar-input::-moz-selection,
+.urlbarView-row[selected] {
+  background-color: var(--cust-accent-inactive) !important;
+}
+
+/* SETUP */
+/* Color mix */
+@media (prefers-color-scheme: dark) {
+  :root{
+    --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);
+    --cust-accent-inactive: color-mix(in srgb, var(--cust-accent) 80%, black);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root{
+    --cust-accent-dark: color-mix(in srgb, var(--cust-accent) 30%, white);;
+    --cust-accent-darker: color-mix(in srgb, var(--cust-accent) 20%, white);
+    --cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, black);
+    --cust-accent-inactive: color-mix(in srgb, var(--cust-accent) 80%, white);
+  }
+}
+
+/* System Accent colors */
+#main-window {
+  --cust-accent: AccentColor;
+}
+
+/* Private colors */
+#main-window[privatebrowsingmode="temporary"] {
+  --cust-accent: color-mix(in srgb, purple 60%, black);
+}
+
+/* Container colors */
+#main-window:has(.tabbrowser-tab[selected][class*="identity-color-"]) {
+  --cust-accent: color-mix(in srgb, var(--container-color) 60%, black);
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-blue) {
+  --container-color: dodgerblue;
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-turquoise) {
+  --container-color: turquoise;
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-green) {
+  --container-color: green;
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-yellow) {
+  --container-color: gold;
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-orange) {
+  --container-color: orange;
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-red) {
+  --container-color: firebrick;
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-pink) {
+  --container-color: pink;
+}
+
+#main-window:has(.tabbrowser-tab[selected].identity-color-purple) {
+  --container-color: purple;
+}

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;
+  }
+
+}
+ */
+
+
+
+
+
+
+
+
+*/
+