update

README.md

@@ -10,7 +10,6 @@ I didn't make any editions at Userchrome.css and I didn't find any way to export
 #### Step 1 - Install addons and resources ⬇️:
 - [Sidebery](https://addons.mozilla.org/pt-BR/firefox/addon/sidebery/) to sidebar
 - [Tabliss](https://addons.mozilla.org/pt-BR/firefox/addon/tabliss/) to "new tab" page
-- [Firefox Color](https://addons.mozilla.org/en-US/firefox/addon/firefox-color/) to color
 - [DM Sans](https://fonts.google.com/specimen/DM+Sans) to font
 
 #### Step 2 - Configure Floorp Browser and extensions:
@@ -22,15 +21,15 @@ I didn't make any editions at Userchrome.css and I didn't find any way to export
   - Design `about:preferences#design` -> Bookmarks Toolbar -> Hide the Bookmarks Toolbar unless hovering over the navigation bar (Optional, you can simply choose to hide the favorite bar always)
   - Design `about:preferences#design` -> Other Preferences -> Round the corners of pages
 - Navigate to Sidebery Settings ⚙️:
-  - Sidebery Settings -> Help -> Import addon data -> Import the settings I left in Github
+  - Sidebery Settings -> Help -> Import addon data -> Import the settings I left in the repo
 
 #### Step 3 (Last Step) - Customize Themes 🎨:
-- Go to [Firefox Color](https://color.firefox.com/?fromAddon=true) (extension needed) and color according to your preferences or install [Darker Leo's](https://addons.mozilla.org/addon/darker-leo-s/) theme.
+- Copy the contents of the `userChrome.css` in this repo
-- Go to new tab (tabliss needs to be installed!) settings
+- Open the `userChrome.css` file 📁: 
-  - Background -> Upload Images -> Upload the image of your choice (I used this [site](https://www.sightunseen.com/2018/08/spanish-artist-ana-montiel-color-field-paintings-digital-art/), this [image](https://www.sightunseen.com/wordpress/wp-content/uploads/2018/08/Fields26-AllRealitiesCoExistingEverywhereForever.jpg))
+  - Floorp options -> Help -> More troubleshooting information -> Under 'Profile Directory' click on 'Open Directory'
-  - Widgets -> Remove all widgets and add Literature Clock
+  - Navigate to the chrome folder and open the `userChrome.css` file
-- Go to Customize Toolbar (By clicking on an empty place of the Firefox title bar)
+- Paste the contents of the file
-  - Add 5 Flexible Space to the left and right of the search bar.
+- Restart Floorp
 
 #### Bonus: Other things
 - If you want to use SplitView along with Sidebery, just add as a shortcut:

userChrome/userChrome.css

@@ -0,0 +1,64 @@
+/*************************************************************************************************************************************************************************************************************************************************************
+
+"userChrome.css" is a custom CSS file that can be used to specify CSS style rules for Floorp's interface (NOT internal site) using "chrome" privileges.
+For instance, if you want to hide the tab bar, you can use the following CSS rule:
+
+**************************************
+#TabsToolbar {                       *
+    display: none !important;        *
+}                                    *
+**************************************
+
+NOTE: You can use the userChrome.css file without change preferences (about:config)
+
+Quote: https://userChrome.org | https://github.com/topics/userchrome 
+
+************************************************************************************************************************************************************************************************************************************************************/
+
+@charset "UTF-8";
+@-moz-document url(chrome://browser/content/browser.xhtml)
+{
+  #sidebar-box {
+    --bar-width: 54px;
+    position: relative !important;
+    overflow-x: hidden !important;
+    /* margin-right: calc(10px * -1) !important; */
+    /* left: var(--bar-width) !important; */
+    min-width: var(--bar-width) !important;
+    max-width: var(--bar-width) !important;
+    border-right: 1px solid var(--sidebar-border-color);
+    z-index: 1;
+    transition: all 0.1s;
+  }
+
+  #sidebar-box:hover {
+    --expanded-width: 250px;
+    margin-right: calc(
+      calc(var(--expanded-width) - var(--bar-width)) * -1
+    ) !important;
+    /* left: var(--expanded-width) !important; */
+    min-width: var(--expanded-width) !important;
+    max-width: var(--expanded-width) !important;
+  }
+
+  #sidebar-box:hover #sidebar-header {
+    min-width: var(--expanded-width) !important;
+    max-width: var(--expanded-width) !important;
+  }
+
+  /* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */
+  #sidebar-header {
+    min-width: var(--bar-width) !important;
+    max-width: var(--bar-width) !important;
+    overflow: hidden !important;
+  }
+
+  /* #sidebar-splitter styles the divider between the sidebar and the rest of the browser. */
+  #sidebar-splitter {
+    display: none;
+  }
+  
+ .browserStack {
+    background-color: var(--toolbar-bgcolor) !important;
+ }
+}