46 lines
2.8 KiB
CSS
Executable file
46 lines
2.8 KiB
CSS
Executable file
/*
|
|
* Automate 2 level tab stacks
|
|
* Forum link: https://forum.vivaldi.net/topic/83079/automate-2-level-tab-stack-columns-v3
|
|
*/
|
|
|
|
/* Automate 2 level vertical tabbar columns */
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > div {
|
|
z-index: 1;
|
|
transition: background-color .15s, flex-basis .12s ease-out .05s !important;
|
|
}
|
|
/* active main column */
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container:is(:focus-within, :hover):not(:has(.SlideBar--FullHeight:active)) + #tabs-subcontainer {
|
|
flex-basis: 30px !important;
|
|
z-index: 0;
|
|
}
|
|
/* active sub column */
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-subcontainer:is(:focus-within, :hover) {
|
|
flex-basis: calc(100% - 64px) !important;
|
|
z-index: 3;
|
|
}
|
|
/* active sub column with small width tabbar */
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:is(:focus-within, :hover) {
|
|
flex-basis: calc(100% - 30px) !important;
|
|
z-index: 3;
|
|
}
|
|
|
|
/* inactive tabbar columns' ratio during small width (minimized sub column to favicon) */
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:not(:focus-within, :hover) {flex-basis: 30px !important;}
|
|
|
|
/* fix small tab hover effect for title, stack counter, & close button */
|
|
#tabs-container .tab.tab-small.tab-mini .tab-header {justify-content: unset; padding-left: 5px;}
|
|
#tabs-container .tab.tab-small.tab-mini .tab-header .title {display: flex;}
|
|
#browser:not(.alt-tabs).substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:hover.tab:not(.button-off, .force-hover, .tab-small) .stack-counter,
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:not(.tab-mini) .stack-counter {display: block; margin-left: -6px;}
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position :is(.tab:hover.tab-small, .tab.force-hover.tab-small) .close {display: flex; margin-left: -3px;}
|
|
|
|
/* autohide inactive columns' scrollbar */
|
|
#tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* optional: hide tabbar columns' resizer */
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container .SlideBar--FullHeight {visibility: hidden;}
|
|
|
|
/* option 2: Minimized main column to favicon + stack counter */
|
|
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style^='width: 9']) > #tabs-subcontainer.visible {flex-basis: calc(100% - 64px) !important;}
|