[CSS Mod] Horizontal Groups Toolbar -- Great for Emoji

I hate the wasted space of a vertical groups toolbar and I love groups! So I set out to make a horizontal groups toolbar using emoji to identify the groups.

Horizontal Groups Toolbar

treetabs-horizontal-groups-5

Features

  • No JS modifications
  • Modify obivous customisations using CSS vars at top of included css
  • Everything from drag indicators to wrapping and font-size have been accounted for
  • Use your own emoji font file
  • Once installed, copy and paste emoji into name of folder, that's it!
  • Updated: 2019-03-15

Install

1. Copy CSS and paste into extension theme.css or import your own file (SEE BELOW)

2. Download Emoji font and copy into css folder (I use Noto)

3. ???

I made this in Vivaldi using the unpacked most recent version. There is more than one way to skin a cat. I am not certain on how to ensure the font embedded goes properly on all browsers under all conditions. Hopefully it's not a big deal.

Another option is to install Noto Emoji as a system font, then reference that font. It should work.

Customizations explained

--emoji-font-family pick your emoji font here

--drag_indicator_width change the thickness of the drag indicator!

--ungrouped_emoji The 'Ungrouped' label is special, so to replace the word ungrouped with something else, you must enter the text here. If using an emoji it must be in this example format "\01F47B"

--emoji_font_size Change the size of the font here. Works best when using a lot of emoji to get the size you desire.

--emoji_padding choose how much padding is around the emoji

--groups_toolbar_padding Adding padding around the toolbar for aesthetics and compensate for drag indicator width

--tab_list_bottom_margin Special case where the js thinks there is more room for the tab list than there actually is, this number is only important if you tend to have groups with a lot of tabs that would cause it to scroll.

THE CSS

@font-face {
  font-family: 'noto-emoji';
  src: url("../theme/fonts/NotoColorEmoji.ttf?txg8vg") format("truetype");
  font-weight: normal;
  font-style: normal;
}
#toolbar_groups { 
  --emoji-font-family: 'noto-emoji';
  --drag_indicator_width: 2px;
  --ungrouped_emoji: "\01F47B";
  --emoji_font_size: 0.8rem;
  --emoji_padding: 4px;
  --groups_toolbar_padding: 4px;
}
#groups {
  --tab_list_bottom_margin: 46px;
}


/* GROUPS TOOLBAR SIZING FIXES */
#toolbar_groups { 
  display:block !important;
  width: 100% !important;
  height: auto !important;
}
/* MAKE GROUPS TOOLBAR HORIZONTAL AND WRAP */
#group_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: inherit !important;
  overflow-y: hidden !important;
  overflow-x: auto;
  padding: var(--groups_toolbar_padding);
}


/* GROUP BUTTON SIZING FIXES */
.group_button {
  flex: 0 0 0px;
  width: auto;
  height: max-content !important;
}

.group_button.active_group:first-child { border-top: 1px solid var(--group_list_borders) !important; }
.group_button:last-child { margin-bottom: 0px !important; }
.group_button:hover:not(.active_group) { width: auto !important; }


/* GROUP LABEL */
.group_title {
  position: relative;
  font-family: var(--emoji-font-family);
  font-size: var(--emoji_font_size) !important;
  transform: none !important;
  padding: var(--emoji_padding) !important;
}

/* UNGROUPED LABEL */
#_gtetab_list { font-size: 0 !important; }
#_gtetab_list::before {
	content: var(--ungrouped_emoji);
	font-size: calc( var(--emoji_font_size) + .2rem);
}


/* DRAG INDICATOR */
/* dragging tab onto group */
.group_button.inside.highlighted_drop_target>.drag_indicator {
	top: calc(var(--drag_indicator_width) / -2) !important;
	left: calc(var(--drag_indicator_width) / -2);
	width: calc(100% - var(--drag_indicator_width)/2) !important;
	height: calc(100% - var(--drag_indicator_width)/2) !important;
	border: var(--drag_indicator_width) solid var(--drag_indicator);
}
/* dragging group to left */
.group_button.before.highlighted_drop_target>.drag_indicator {
	left: calc(var(--drag_indicator_width) / -2) !important;
	width: auto !important;
  border-left: var(--drag_indicator_width) solid var(--drag_indicator);
  border-top: 0px;
}
/* dragging group to right */
.group_button.after.highlighted_drop_target>.drag_indicator {
	right: calc(var(--drag_indicator_width) / -2) !important;
	width: auto !important;
  border-right: var(--drag_indicator_width) solid var(--drag_indicator);
  border-bottom: 0px;
}


/* TAB LIST */
#groups {
  position: relative;
  left: inherit !important;
  width: 100% !important;
}

.group>.children>:last-child {
  margin-bottom: var(--tab_list_bottom_margin);
}
Edited by Luna