3. Sidebar

Sidebar Colors

Both hover and static sidebars use the same 14 colors palette for theming and can be generated with flyingfox app.

WIP There is no quick way to enable light theme for TST yet. You will have to go for each of the color variables and change all the dark colors to light and vice versa. For example, consider this as an excerpt from original state of TST css:

  --dark-base: #192330;
  --dark-1: #233143;
  /* ... */
  --light-base: #afc0d5;
  --light-1: #A1B5CE;

Go over each variable that starts with dark and light and convert it in following manner: --dark-base: #192330; -> --light-base: #192330

After you are done converting it should look like this:

  --light-base: #192330;
  --light-1: #233143;
  /* ... */
  --dark-base: #afc0d5;
  --dark-1: #A1B5CE;

Sidebar Variables

• Active tab border radius: --tab-border-radius
• Animation speed: --animation-duration with unit s(seconds) or ms(milliseconds). Set this to 0s if you want to turn all the animations off.
• Spacing: --spacing controls the spacing between all the tabs.
• Tabs distance from edges: --distance-from-edges controls the distance between the tabs, and the borders of the sidebars. Essentially the padding for sidebar.
• Collapsed sidebar text spacing: --hover-text-spacing You most likely won't need this. In case text is visible for hover sidebars while they are collapsed, set it to something bigger than 0.1. The value is factored in exponentially so a few decimal points should be enough.

Sidebar Hover Branching

Branching doesn't look aesthetic with userchrome-hover beyond a tab-or-two depth. You can turn branching off in TST as shown here.

Branching sidebar has been fixed as of 0.1.1.

Hover-sidebar no longer requires setting "Right side" for sidebar position.

Set "Left side" sidebar position and use treestyletab/custom-hover.css for hover-sidebar.