I wish to remove the ugly looking line between my custom home button and the first tab. You can find that on the top left. I already have userChrome.css set up and I foun… (funda kabanzi)
I wish to remove the ugly looking line between my custom home button and the first tab. You can find that on the top left. I already have userChrome.css set up and I found no help on the r/FirefoxCSS subreddit.
My userChrome.css code:
```
- root {
--toolbar-field-focus-border-color: transparent !important;
--toolbarbutton-inner-padding: 10px !important;
--toolbarbutton-border-radius: 2em !important;
--urlbar-container-padding: 0px !important;
}
- nav-bar {
box-shadow: none;
}
- urlbar {
padding: 8px !important;
}
- urlbar-background {
background-color: rgb(255, 255, 255) !important;
border-radius: 16px !important;
box-shadow: rgb(230, 230, 230) 0px 0px 5px 0px !important;
}
.tab-background {
border-radius: 16px !important;
box-shadow: rgb(225, 225, 225) 0px 1px 5px 0px !important;
}
.tabbrowser-tab .close-icon{
border-radius: 2em !important;
margin-right: 0px !important;
}
.tabbrowser-tab .close-icon:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
outline: none !important;
}
- tabs-newtab-button:hover > .toolbarbutton-icon {
background-color: rgba(255, 255, 255, 0.25) !important;
border-radius: 2em !important;
}
- PlacesToolbarItems .bookmark-item {
padding: 5px;
margin: 25px;
}
- navigator-toolbox { border: none !important;}
- PersonalToolbar {
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px !important;
}
```
For anyone who can be of EXTRA help, I wish to also fully round the search bar in my "about:home" which you can see is underneath the FireFox logo. I want to add my own custom border radius of "2em" and remove the blue outline when selected.