cleanup

add.svg

@@ -7,13 +7,13 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   width="48"
-   sodipodi:docname="ic_add_48px.svg"
-   id="svg4"
-   version="1.1"
-   viewBox="0 0 48 48"
    height="48"
-   width="48">
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="add.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
   <metadata
      id="metadata10">
     <rdf:RDF>
@@ -22,35 +22,36 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <defs
      id="defs8" />
   <sodipodi:namedview
-     inkscape:current-layer="svg4"
+     inkscape:document-rotation="0"
-     inkscape:window-maximized="0"
+     pagecolor="#ffffff"
-     inkscape:window-y="28"
-     inkscape:window-x="45"
-     inkscape:cy="24"
-     inkscape:cx="24"
-     inkscape:zoom="12"
-     inkscape:pagecheckerboard="true"
-     showgrid="false"
-     id="namedview6"
-     inkscape:window-height="740"
-     inkscape:window-width="1321"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
      bordercolor="#666666"
-     pagecolor="#ffffff" />
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1321"
+     inkscape:window-height="740"
+     id="namedview6"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="12"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-x="45"
+     inkscape:window-y="28"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
   <path
-     style="fill:#ffffff;fill-opacity:1;stroke-width:1.71429"
+     d="M 40,26.285714 H 26.285714 V 40 H 21.714286 V 26.285714 H 8 V 21.714286 H 21.714286 V 8 h 4.571428 V 21.714286 H 40 Z"
      id="path2"
-     d="M 48,27.428571 H 27.428571 V 48 H 20.571429 V 27.428571 H 0 V 20.571429 H 20.571429 V 0 h 6.857142 V 20.571429 H 48 Z" />
+     style="fill:#ffffff;fill-opacity:1;stroke-width:1.14286" />
 </svg>

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: #985EFFCC;
 
 	--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);
 }
 
@@ -328,7 +362,9 @@ The findbar
 Contains history, bookmarks, and etc.
 */
 
-#history-panel, #sidebar-search-container {
+#history-panel,
+#sidebar-search-container,
+#bookmarksPanel {
  	background: var(--bf-bg) !important;
 }
 
@@ -366,13 +402,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 +442,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 +502,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;
+}
+ 

userContent.css

@@ -2,22 +2,18 @@
 
 /* Removes white loading page */
 @-moz-document url(about:blank), url(about:newtab), url(about:home) {
-    html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
+	html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
-      background: var(--mff-bg) !important;
+		background: var(-bf-bg) !important;
-    }
+	}
-  }
+}
 
+/* Hide scrollbar */
+:root{
+	scrollbar-width: none !important;
+}
 
-  /* Hide scrollbar */
+@-moz-document url(about:privatebrowsing) {
-
+	:root{
-  :root{
+		scrollbar-width: none !important;
-    scrollbar-width: none !important;
+	}
-  }
+}
-
-
-  @-moz-document url(about:privatebrowsing) {
-
-  :root{
-    scrollbar-width: none !important;
-  }
-  }