Updates and fixes (#1)

* contextmenu, higlight colors, and many changes and fixes

* cleanup

* fix button bug

userChrome.css

@@ -1,32 +1,36 @@
 :root {
-	--bf-bg: #00000039;
+	--bf-bg: #00000066;
-	--bf-bg-hover: #fefefe20;
+	--bf-hover-bg: #fefefe20;
 	--bf-color: #f2f2f2;
 	--bf-focused-color: #fefefe;
+	
+	--bf-accent-bg: #4C5FF9CC;
 
 	--bf-icon-color: #f2f2f2;
-	--bf-switch-tab-color: orange;
+	--bf-switch-tab-color: #6498EF;
-	--bf-bookmark-color: green;
+	--bf-bookmark-color: #53E2AE;
 
 	--bf-tab-font-size: 11pt;
 	--bf-tab-font-weight: 500;
 	--bf-tab-color: var(--bf-color);
-	--bf-tab-selected-bg: #00000060;
+	--bf-tab-selected-bg: var(--bf-bg);
 
 	--bf-tab-height: 32px;
 	--bf-tab-border-radius: 6px;
 
-	--bf-tab-soundplaying-bg: var(--bf-bg-hover);
+	--bf-tab-soundplaying-bg: var(--bf-hover-bg);
 
 	--bf-navbar-padding: 4px;
-
+  
+	--bf-urlbar-bg: var(--bf-bg);
+	--bf-urlbar-active-bg: #000000BB;
 	--bf-urlbar-color: var(--bf-color);
 	--bf-urlbar-focused-color: var(--bf-focused-color);
 	--bf-urlbar-font-size: 12pt;
 	--bf-urlbar-font-weight: 500;
 
 	--bf-urlbar-results-font-size: 12pt;
-	--bf-urlbar-results-font-weight: 350;
+	--bf-urlbar-results-font-weight: 550;
 	--bf-urlbar-results-url-color: var(--bf-color);
 
 	--bf-sidebar-bg: transparent;
@@ -34,6 +38,8 @@
 
 	--bf-menupopup-bg: #00000090;
 	--bf-menupopup-color: var(--bf-color);
+	
+	--bf-splitter-bg: #00000090;
 
 	--autocomplete-popup-background: var(--bf-bg) !important;
 	--default-arrowpanel-background: var(--bf-bg) !important;
@@ -44,8 +50,6 @@
 	--urlbar-separator-color: transparent !important;
 }
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
 /*
 ░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
 ░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
@@ -55,7 +59,7 @@ Transparent Window
 */
 
 #main-window {
-	background: var(--bf-bg) !important;
+	background: transparent !important;
 	border: none !important;
 }
 
@@ -85,6 +89,11 @@ toolbarbutton {
 	margin-left: 2px !important;
 }
 
+.toolbarbutton-1 {
+	--toolbarbutton-hover-background: var(--bf-hover-bg) !important;
+	--toolbarbutton-active-background: var(--bf-hover-bg) !important;
+}
+
 #urlbar {
 	max-width: 70% !important;
 	margin: 0 15% !important;
@@ -95,7 +104,7 @@ toolbarbutton {
 }
 
 #urlbar-background {
-	background-color: var(--bf-bg) !important;
+	background-color: var(--bf-urlbar-bg) !important;
 	border: none !important;
 }
 
@@ -104,6 +113,10 @@ toolbarbutton {
 	background-color: transparent !important;
 }
 
+.megabar[open=true] > #urlbar-background {
+	background: var(--bf-urlbar-active-bg) !important;
+}
+
 #navigator-toolbox, toolbaritem {
 	border: none !important;
 }
@@ -121,7 +134,8 @@ toolbarbutton {
 	display: none !important;
 }
 
-image #star-button {
+#star-button {
+  /* 	Hide URL bar bookmark button */
 	display: none;
 }
 
@@ -143,6 +157,11 @@ image #star-button {
 	color: var(--bf-urlbar-results-color) !important;
 }
 
+.urlbarView-row-inner:hover {
+  /* 	hover background color */
+	background: var(--bf-accent-bg) !important;
+}
+
 .urlbarView-url, .search-panel-one-offs-container {
 	color: var(--bf-urlbar-results-url-color) !important;
 	font-weight: var(--bf-urlbar-results-font-weight);
@@ -156,7 +175,22 @@ image #star-button {
 	text-align: center !important;
 }
 
-#tracking-protection-icon-container, #identity-
+::-moz-selection {
+	/* URL bar hightlight color */
+	background-color: var(--bf-accent-bg) !important;
+}
+
+#searchbar {
+	background: var(--bf-bg) !important;
+	border: none !important;
+}
+
+.searchbar-textbox {
+	color: var(--bf-focus-fg) !important;
+	font-weight: 700 !important;
+}
+
+#tracking-protection-icon-container, #identity-box
 {
 	display: none !important;
 }
@@ -241,7 +275,7 @@ The tabs container
 
 hbox.tab-content .tab-icon-image {
 	/* Hide tab icon */
-	display: initial !important;
+	display: none !important;
 }
 
 hbox.tab-content[pinned=true] .tab-icon-image {
@@ -253,7 +287,7 @@ hbox.tab-content[pinned=true] .tab-text {
 	display: none !important;
 }
 
-.tab-line {
+.tab-line, .tab-bottom-line {
   /* 	Hide the tab line */
 	display: none !important;
 }
@@ -279,7 +313,7 @@ hbox.tab-content[pinned=true] .tab-text {
 }
 
 #tabs-newtab-button {
-	padding-bottom: 4px !important;
+	padding-bottom: 5px !important;
 }
 
 #tabs-newtab-button {
@@ -292,7 +326,7 @@ tab.tabbrowser-tab {
 }
 
 tab.tabbrowser-tab:hover {
-	background: var(--bf-bg-hover) !important;
+	background: var(--bf-hover-bg) !important;
  	box-shadow: 0 1px 4px rgba(0,0,0,.05);
 }
 
@@ -366,13 +400,10 @@ image #sidebar-icon {
  	--sidebar-background-color: var(--bf-sidebar-bg) !important;
 }
 
-splitter #sidebar-splitter {
+#sidebar-splitter {
- 	opacity: 1 !important;
-}
-
-splitter #sidebar-splitter {
  	border: none !important;
-	background-color: var(--bf-bg) !important;
+	opacity: 1 !important;
+	background-color: var(--bf-splitter-bg) !important;
 }
 
 /* 
@@ -409,34 +440,53 @@ box.panel-arrowcontent {
 Right-click menu
 */
 
-
+menupopup, popup,
-menupopup {
+popup > menu > menupopup,
- 	-moz-appearance: none !important;
+menupopup > menu > menupopup {
- 	background: var(--bf-menupopup-bg) !important;
+	-moz-appearance: none !important;
- 	border: none !important;
+	background: var(--bf-menupopup-bg) !important;
- 	border-radius: 4px !important;
+	border: 0px !important;
- 	padding: 4px 0 !important;
+	border-radius: 4px !important;
+	padding: 2px 0px 2px 0px  !important;
 }
 
-menupopup label {
+menupopup menuseparator {
- 	color: var(--bf-menupopup-color) !important;
+	-moz-appearance: none !important;
+	background: #525A6D  !important;
+	margin: 2px 0px 2px 0px !important;
+	padding: 0 !important;
+	border-top: none !important;
+	border-color: transparent !important;
 }
 
-menupopup menupopup {
+menupopup menu, menuitem {
- 	margin: -5px 0 0 -4px;
+	-moz-appearance: none !important;
+	color: var(--bf-focused-color) !important;
+	padding: 5px !important;
 }
 
-menubar > menu > menupopup {
+menupopup menu[disabled=true], menuitem[disabled=true] {
- 	border-top-left-radius: 0 !important;
+  /* 	Disabled button */
- 	border-top-right-radius: 0 !important;
+	-moz-appearance: none !important;
+	opacity: 0.5 !important;
+	color: var(--bf-focused-color) !important;
+	background-color: transparent !important;
 }
 
-menuitem[type="checkbox"] image, menuitem[type="radio"] image {
+menupopup menu:hover:not([disabled=false]), menuitem:hover:not([disabled=false]) {
- 	visibility: visible !important;
+  /* 	Disabled button hover */
+	-moz-appearance: none !important;
+	opacity: 0.5 !important;
+	color: var(--bf-focused-color) !important;
+	background-color: transparent !important;
 }
 
-menuitem[disabled="true"]:hover, menupopup menu[disabled="true"]:hover {
+menupopup menu:hover:not([disabled=true]), menuitem:hover:not([disabled=true]) {
- 	background: transparent !important;
+  /* 	Enabled button hover */
+	-moz-appearance: none !important;
+	color: var(--bf-focused-color) !important;
+	opacity: 1 !important;
+	background-color: var(--bf-accent-bg) !important;
 }
 
 /* 
@@ -450,3 +500,34 @@ The control buttons. Contains, close, minimize, and maximize buttons
 #autohide-context, #window-controls {
 	display:none!important;
 }
+
+/* 
+░█▀▀░█░█░█▀▀░▀█▀░█▀█░█▄█░▀█▀░▀▀█░█▀█░▀█▀░▀█▀░█▀█░█▀█░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█
+░█░░░█░█░▀▀█░░█░░█░█░█░█░░█░░▄▀░░█▀█░░█░░░█░░█░█░█░█░█▄█░░█░░█░█░█░█░█░█░█▄█
+░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
+ 
+The customization window
+*/
+
+#customization-container {
+	background: var(--bf-bg) !important;
+}
+
+.customizationmode-button {
+	-moz-appearance: none !important;
+	background: var(--bf-bg) !important;
+	padding: 5px !important;
+	border-radius: 6px !important;
+}
+
+.customizationmode-button:hover {
+	-moz-appearance: none !important;
+	background: var(--bf-hover-bg) !important;
+	padding: 5px !important;
+	border-radius: 6px !important;
+}
+
+.customizationmode-button label {
+	color: var(--bf-color) !important;
+}
+