Shrink sidebar, left side, border and Vivaldi look [Solved]]

[berliozz]

Can anybody explain me, how to add border for sidebar. On screen I show, how it looks now.

And second question, how to remove vertical blue line on active tab?

[berliozz]

Few hours and I get result. See screenshot. Settings below:

• default theme
• autoshrink
• always compact mode
• right side tab panel
• border for panel
• no color indicator for active tab, only background
• auto hide favicon on hover and set close on it place

All settings you find below. I'm hasn't any skills on CSS, and mode skilled members of this repository can correct this.

CSS Code

topmenu {

display: none; }

pinnedtablist {

box-shadow: 0px 1px 0px hsla(0, 0%, 0%, 0.2); z-index: 1; }

pinnedtablist .tab:last-of-type {

border-bottom: none; }

.tab-context { height: calc(100% + 1px); position: relative; top: 0.5px; }

pinnedtablist .tab:last-of-type .tab-context {

height: 100%; top: 0px; }

/ Loading burst / .tab-loading-burst, .tab-loading-burst:before { display: block; }

.tab-close { right: unset; left: 5px; }

.tab:hover:not(.pinned) .tab-icon-wrapper { opacity: 0; }

.tab.active { background-color: #e1e1e2; }

.tab-context:not(.hasContext) { --identity-tab-color: #e1e1e2; }

.tab-context { background-image: none; }

tablist-wrapper.shrinked .tab:not(.pinned) {

height: 30px !important; }

tablist-wrapper {

border-left: 1px solid #e1e1e2; }

userChrome.css @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

TabsToolbar { visibility: collapse !important; }

/* Windows users might also want to consider setting

• browser.tabs.drawInTitlebar to false in about:config */

tabbrowser-tabs {

visibility: collapse !important; }

sidebar-box {

overflow: hidden; min-width: 30px; max-width: 30px; position: fixed; transition: all 0.5s ease;
}

sidebar-box:hover,

sidebar-header,

sidebar {

min-width: 15vw !important; max-width: 15vw !important; }

sidebar-header,

sidebar-splitter {

display: none; }

sidebar-box[ordinal="4"] {

right: 0; }

/*

• ADJUST!
• You need to subtract the height of the panels above sidebar: nav bar,
• bokmarks bar, sidebar header, etc. -- whichever you have enabled.
• 42px subtracted below is the height of the nav bar with default theme.
• I don't have bookmarks bar enabled, and sidebar header is hidden with
• CSS above, so this is all I need to do.
• Compact theme nav bar height is 29px btw, if you use that. */

  sidebar {

  height: calc(100vh - 42px); }

appcontent {

margin-right: 30px; }

main-window[inFullscreen][inDOMFullscreen] #appcontent {

margin-right: 0; }

main-window[inFullscreen] #sidebar {

height: 100vh; }

[eoger]

Great to hear you solved your problem, looks good!

[berliozz]

I have little additions about address bar and control buttons. I was change some settings and got those look.

eoger — I think, you can add this to FAQ and example.

#titlebar { -moz-appearance: none !important; /*-moz-appearance: -moz-mac-vibrancy-light !important; */ height: 37px !important; margin-bottom: -37px !important; }

#titlebar-buttonbox-container { margin-left: 5px !important; }

#nav-bar { /*-moz-appearance: -moz-mac-vibrancy-light !important; */ position: relative !important; z-index: 1 !important; -moz-box-ordinal-group: 1 !important; -moz-box-align: center !important; margin: 0px 5px 0px 75px !important; padding: 0px 4px !important; border-top: none !important; max-height: 37px !important; min-height: 37px !important; background-image: unset !important; background-color: transparent !important; }

#TabsToolbar { visibility: collapse !important; }

/* Windows users might also want to consider setting

• browser.tabs.drawInTitlebar to false in about:config */

#tabbrowser-tabs { visibility: collapse !important; }

P.S. this is not my code, I just found it, but don't member where.