Browsers which allow the address bar to be placed above the tabs

jfi: Also note, in case it is needed, besides setting both min & max tab width in Aris's userChrome, it is also possible to set a minimum width for the tabs using about:config > browser.tabs.tabMinWidth (default is 76px).

Within Chrome\config\color_variables_classic-grey.css (as per Ghot's zip file),
you can set the colors of the navbar, menubar, active/other tabs etc. as shown by the indentations in the below example.
(You can keep the CSS indentations to easily identify your own changes).

Code:

/* Classic grey colors */
:root {
  --general_toolbar_color_toolbars: linear-gradient(#d4d0c8,#d4d0c8) !important;
          --general_toolbar_color_navbar: linear-gradient(#ffffff,#ffffff) !important;
  --general_toolbar_text_color: black !important;
  --general_toolbar_text_shadow: transparent !important;
          --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#708090,#708090) !important;
  --tabs_toolbar_border-tnot_normal_mode_size: 0px !important;
  --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color) !important;
          --colored_menubar_background_image: linear-gradient(#0078D6,#0078D6) !important;
  --colored_menubar_text_color: white !important;
  --statusbar_background_color: linear-gradient(#d4d0c8,#d4d0c8) !important;
  --statusbar_font_color: black !important;
          --classic_squared_tabs_active_tab: linear-gradient(to top,azure,azure,lightblue) !important;
  --classic_squared_tabs_hovered_tabs: linear-gradient(to top,#cac7c1,#d5d2cc,#e1ded8) !important;
          --classic_squared_tabs_other_tabs: linear-gradient(to top,#00FEFE,#00FEFE,aquamarine) !important;
          --classic_squared_tabs_unloaded_tabs: linear-gradient(to top, #00FEFE,#00FEFE,#00FEFE) !important;
  --classic_squared_tabs-border_size: 1px;
  --classic_squared_tabs-border1: #5f7181 !important;
  --classic_squared_tabs-border2: rgba(0,0,0,.2) !important;
  --classic_squared_tabs-border3: rgba(0,0,0,.5) !important;
  --classic_squared_tabs_new_tab_icon_color: black !important;
  --classic_squared_tabs_tab_text_color: black !important;
  --classic_squared_tabs_tab_text_shadow: transparent !important;
  --classic_squared_tabs_lwt-dark_active_tab: inherit !important; /* linear-gradient(blue, hsla(0,0%,60%,.5) 80%) */
  --classic_squared_tabs_lwt-dark_hovered_tabs: linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 80%) !important;
  --classic_squared_tabs_lwt-dark_other_tabs: linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 80%) !important;
  --classic_squared_tabs_lwt-bright_hovered_tabs: linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 80%) !important;
          --classic_squared_tabs_lwt-bright_other_tabs: linear-gradient(aquamarine,aquamarine,aquamarine) !important;
  --classic_squared_tabs_lwt-bright_active_tab: inherit !important; /* linear-gradient(blue, hsla(0,0%,60%,.5) 80%) */
}

Inside Chrome\config\custom_tab_text_settings.css,
you can set the tab text color (and also disable the italic/shadow style if you don't need them) as shown in these extracts from custom_tab_text_settings.css.

Code:

/*******************************************/
/* selected tab ****************************/

     /* text color */
     .tabbrowser-tab[selected] .tab-label {
       color: black !important;
     }
/* text shadow */
     /*.tabbrowser-tab[selected] .tab-label {
       text-shadow:	0px 1px 0px white,
     				0px 1px 4px white !important;
     }*/
/*bold*/
.tabbrowser-tab[selected] .tab-label {
  font-weight: bold !important;
}
     /* italic *//*
     /*.tabbrowser-tab[selected] .tab-label {
       font-style: italic !important;
     }*/



/*******************************************/
/* unloaded/pending tab ********************/

     /* text color */
     .tabbrowser-tab[pending] .tab-label {
       color: black !important;
     }
/* text shadow */
     /*.tabbrowser-tab[pending] .tab-label {
       text-shadow:	0px 1px 0px white,
     				0px 1px 4px white !important;
     }*/
     /*bold*/
     .tabbrowser-tab[pending] .tab-label {
       font-weight: normal !important;
     }
     /* italic */
     /*.tabbrowser-tab[pending] .tab-label {
       font-style: italic !important;
     }*/

Which should give you something like:

das10 said:

Within Chrome\config\color_variables_classic-grey.css (as per Ghot's zip file),
you can set the colors of the navbar, menubar, active/other tabs etc. as shown by the indentations in the below example.
(You can keep the CSS indentations to easily identify your own changes)...

Thanks so much for such a detailed response. I shall have fun trying that, and your other example.

Ghot said:

So any time you want to "add" any custom code... just add it to the my_userChrome.css file.

Thanks. Just to make sure I'm clear, you're talking about adding something completely new as opposed to changing parameters in existing lines in Chrome/config/color_variables.css (which should be done without moving the original)?

I couldn't find any setting in Aris's code to change the spaces you want (unless anybody else is able to), so...

For the spaces between the tabs, try appending "either one" of the following codes in "my_userChrome.css" file.

Code:

/* Alter gaps between all the tabs (Excluding pinned tabs) */
.tabbrowser-tab:not([pinned]) {
   padding-inline: 0.5px !important;   /* adjust px size as needed here*/   
}

/*  OR alternatively use this to show space between pinned tabs as well */

/* Alter gaps between all the tabs (Including pinned tabs) */
.tabbrowser-tab {
   padding-inline: 0.5px !important;  /* adjust px size as needed here */   
}

For the space between the tops of the tabs and the tab-bar itself, try experienting with the following code appended to "my_userChrome.css" file (change the px value as required-but note that you may need to use the same px values in all 3 sections -I have use 5px to test).

Code:

/* 
Alter space between tabs and top of tab-bar - may also require changes to padding/margin to 
nav-bar and Bookmarks bar when it is shown (ie PersonalToolbar) 
The same "px" value all round seems to balance everything out.
*/

#TabsToolbar {
     padding-top:    5px    !important;
}     
#nav-bar {
     padding-bottom: 5px    !important;
}
#PersonalToolbar {
    margin-block:   -5px 5px !important;    
}

[If anyone else has any other ideas, please put them forward.]