Remove separator in between Button and First Tab
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.
すべての返信 (1)
Something like this should help to hide the border-left that is added under some conditions, you can remove the padding-left and margin-left as well. You can use #tabbrowser-tabs as the only selector to remove the border in all cases.
:is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs {
border-inline-start: 0px !important;
padding-inline-start: 0px !important;
margin-inline-start: 0px !important;
}