Tab Tweaks - userChrome.css

Board for discussions around the Basilisk web browser.

Moderator: Basilisk-Dev

User avatar
fatboy
Astronaut
Astronaut
Posts: 558
Joined: 2017-12-19, 08:03
Location: Canada

Tab Tweaks - userChrome.css

Unread post by fatboy » 2023-10-16, 15:32

Good Day Folks,

I have a heavily modified UI for Basilisk on Linux by means of the userChrome.css file.

My question are:
1) How do I remove/change the color of the line that separates tabs? See attached photo. I have the same tab tweak for Pale Moon and see that line there as well. Looks like a separators on the left & right hand sides of the active tab?
tab_lines.png
2) You will see that is looks like my tabs are rounded on the bottom corners, how do I remove this rounded corner?

I thank you kindly.


Below is my css file:

Code: Select all

/*  Permanent List-all-tabs Button - Basilisk  */
/* #tabbrowser-tabs ~ #alltabs-button { visibility: visible !important; } */

/* HIDE Elements on URL Bar */
#back-button {
	display: none;
}

#forward-button {
	display: none;
}

#reload-button {
	display: none;
}

#stop-button {
	display: none;
}

#home-button {
	display: none;
}

/* Hide the hamburger menu */
/* #PanelUI-button {
	display: none;
} */

/* Hide Tab Favicons */
.tabbrowser-tab:not([pinned]) .tab-icon-image { -moz-box-ordinal-group: 2 !important; display: none !important;}

/* Hide URL Bar Elements */
#go-button { display: none !important; }
.tab-throbber { display: none !important; }
.tabbrowser-arrowscrollbox + stack { display: none !important; }
#sidebar-header {display:none!important;} 
.autocomplete-history-dropmarker {
display: none !important; }

/* Left URL Bar Font */
#urlbar {
	text-align: left;
	font-family: sans;
	font-size: 15px !important;
	padding: 0px 0px 0px 0px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	border-radius: 0 !important;
}


#urlbar-reload-button.chromeclass-toolbar-additional {display:none !important;}
#urlbar-go-button.chromeclass-toolbar-additional {display:none !important;} 
#urlbar-stop-button.chromeclass-toolbar-additional {display:none !important;}


/* Left Align type-ahead auto-complete drop down in URL bar */
#PopupAutoComplete, .autocomplete-tree { 
	text-align: left;
} 

/* Height of the Bookmarks Toolbar */
#PersonalToolbar {
	padding: 0px 0px 0px 0px !important;
	height: 23px !important;   
/*	margin-left: 0px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important; */
} 


/* Toolbar height, contains URL bar*/
toolbar {
   max-height: 32px !important;
   padding: 1px 1px 1px 1px !important;
	margin-top: 0px !important;
	margin-right: 0px !important;
	margin-bottom: 0px !important;
	margin-left: 0px !important; 
}

/* --- **** Menus **** --- */
/* Hide Right-Click Menu Items */
menupopup > menuitem[label="View Page Source"] {display: none !important;}
menupopup > menuitem[label="View Background Image"] {display: none !important;}
menupopup > menuitem[label="View Page Info"] {display: none !important;}
menupopup > menuitem[label="Inspect Element"] {display: none !important;}
#context-savepage {display: none !important;}
#context-sendpage {display: none !important;}

/* Hide Menus */
#navigator-toolbox menu[label="Go"]
{ display: none !important; } 
#navigator-toolbox menu[label="Window"]
{ display: none !important; } 

/* ############---- TAB TWEAKS ----############ */ 
/* Tab: selected colors */
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
/* --- Tweak to inherit custom tab colors ---*/
	background: #48E4C3; !important;
	color: #000000 !important;
	border: none !important; 
/* --- Tweak to inherit GTK theme tab colors ---*/
/* background: var(--tab-active-color) !important; */	
/*	color: var(--identity-icon-color, --tab-fallback-color-active) !important; */
} 

/* Tab: hovered colors */
#tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
	background: #365053 !important;
	color: #D8D8D8 !important;
}

/* Tab: Inactive Tab Font Color */
.tabbrowser-tab:not([selected]) {
  color: #bcbcbc !important;
}

/* change to control tabbar height */
#titlebar {
	--tab-min-height: 28px !important;
}

/* ###--- STYLE TAB TOOLBAR ---### */
#titlebar {
	--proton-tab-block-margin: 0px !important;
	--tab-block-margin: 0 !important;
}

:root:not([customizing]) #TabsToolbar {
	background-color: #222;
}

:root:not([customizing]) #navigator-toolbox {
	background-color: #222 !important;
}

#TabsToolbar,
.tabbrowser-tab {
	max-height: var(--tab-min-height) !important;
	font-size: 14px !important;
	margin-top: -1px !important;
	margin-bottom: 1px !important;
}

/* Change color of normal tabs */
tab:not([selected="true"]) {
	background-color: var(--tab-inactive-color) !important;
	color: var(--identity-icon-color, --tab-fallback-color-inactive) !important;
}

tab {
	font-family: monospace;
	font-weight: normal;
	border: none !important;
}

/* hide tab bar if only one tab open */
tab:only-of-type {
	display: none;
}

/* safari style tab width */
.tabbrowser-tab[fadein] {
	max-width: 100vw !important;
	border: none
}

/* Hide close button on tabs */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
	display: none !important;
}

.tabbrowser-tab {
	/* remove border between tabs */
	padding-inline: 0px !important;
	/* remove fading effect from tab text */
	--tab-label-mask-size: 1em !important; 
	/* fix pinned tab behaviour on overflow */
	overflow-clip-margin: 0px !important; 
} 

/* remove min-height from tabs toolbar (needed for fullscreen one tab) */
#TabsToolbar,
#tabbrowser-tabs,
#tabbrowser-tabs>.tabbrowser-arrowscrollbox,
#tabbrowser-arrowscrollbox {
	min-height: 0 !important;
}

/* Remove Rounded Bottom Corners in Default theme */
 .tab-background {
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  -moz-margin-start: 0px !important;
  -moz-margin-end: 0px !important;
}


/* Move Hamburger button (Panel Menu button) to left side of Url bar */
/* #nav-bar-customization-target { -moz-box-ordinal-group: 2 !important; } */

You do not have the required permissions to view the files attached to this post.
Systemd Free - MX Linux, Antix Linux & Artix Linux

Blacklab
Board Warrior
Board Warrior
Posts: 1081
Joined: 2012-06-08, 12:14

Re: Tab Tweaks - userChrome.css

Unread post by Blacklab » 2023-10-16, 19:42

Ran CSS userstyles provided above on an 'out-of-the-box' new Basilisk profile (v2023.10.03 on Win10) with no settings altered and no extensions.

On Windows 10 neither problem described above is apparent. No "separators on the left & right hand sides of the active tab?" and no "tabs are rounded on the bottom corners"... even with UI toolbars considerably magnified by increasing preference 'layout.css.devPixelsPerPx' to 2.0 in about:config. Possible conflict with other installed extensions? Suggest test CSS on a clean Basilisk profile.

User avatar
somdcomputerguy
Lunatic
Lunatic
Posts: 385
Joined: 2014-02-23, 17:25
Location: Greenbrier County, West Virginia

Re: Tab Tweaks - userChrome.css

Unread post by somdcomputerguy » 2023-10-16, 21:43

Blacklab wrote:
2023-10-16, 19:42
Possible conflict with other installed extensions?
This may be related to using a different theme..
:cool: -bruce /* somdcomputerguy.com */
'If you change the way you look at things, the things you look at change.'

User avatar
fatboy
Astronaut
Astronaut
Posts: 558
Joined: 2017-12-19, 08:03
Location: Canada

Re: Tab Tweaks - userChrome.css

Unread post by fatboy » 2023-10-16, 22:18

Hi Blacklab, thanks for the input. I think it has to do with the GTK theme and the browser theme, but it means that there is an css element there that I need to remove still?
And once removed it will appear, regardless of GTK theme and Browser theme.
Systemd Free - MX Linux, Antix Linux & Artix Linux