@oudstand
Its not the trash can the names are
Open a New Tab
Show Closed Tabs
Synced Tabs
These 2 icons are surrounding the "title open a new tab" button and you cannot even inspect the new tab when my css is in place.
32b3a76b-34af-412e-a5dc-fcab5132a908-image.png
I have edited the css to the correct names and i can now seperate them.
But now the issue i have is Vivaldi opens correctly the bar looks fine on hover it look ok but whe i take hover off the bar does not close correctly .
/* Transition for tab containers */
#tabs-container.left,
#tabs-subcontainer.left,
#tabs-container.right,
#tabs-subcontainer.right {
min-width: 32px;
transition: min-width 300ms ease-out;
}
/* Hover effect for expanding tab containers */
#tabs-container.left:hover,
#tabs-subcontainer.left:hover,
#tabs-container.right:hover,
#tabs-subcontainer.right:hover {
min-width: 150px !important;
}
/* Adjust width for tab workspace button */
.tabbar-workspace-button {
width: 100% !important;
}
/* Adjust tabbar container width */
#tabs-tabbar-container.left,
#tabs-tabbar-container.right {
width: auto !important;
min-width: 32px;
}
/* Adjust new tab button toolbar */
.button-toolbar.newtab {
position: absolute;
bottom: 0; /* Align at the bottom */
width: 32px;
transition: width 300ms ease-out, left 300ms ease-out;
}
/* Expanded tabbar styling */
#main > .inner > div:has(#tabs-tabbar-container:is(.left, .right)) {
position: absolute;
z-index: 2;
opacity: 1;
background-color: rgba(255, 255, 255, 0.7);
height: 100% !important;
}
/* Styling for transparent tabbar */
#browser.transparent-tabbar .inner > div:has(#tabs-tabbar-container:is(.left, .right)) {
background-color: rgba(0, 0, 0, 0.5);
}
/* Margin adjustment for webpage stack */
.inner #webpage-stack {
margin-left: 32px;
}
/* Margin adjustment for webpage stack when tabs are on the side */
.inner:has(#tabs-subcontainer:is(.left, .right)) #webpage-stack {
margin-left: 64px;
}
/* Hide Window Close, Minimize & Maximize Buttons */
.window-minimize,
.window-maximize,
.window-close {
display: none !important;
}
#browser .window-buttongroup {
display: none;
}
.vivaldi {
order: 2;
}
/* New tab button and other icons order */
.newtab {
order: -1;
position: relative;
z-index: 3;
}
.synced-tabs-button {
order: 1;
position: relative;
z-index: 2;
}
.toggle-trash {
order: 2;
position: relative;
z-index: 2;
}
/* Ensure new tab button is not enclosed by other elements */
.toolbar-tabbar .newtab,
#tabs-tabbar-container .newtab {
position: relative;
bottom: 0;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Ensure proper transition for tab container */
#tabs-container.left:hover .button-toolbar.newtab,
#tabs-subcontainer.left:hover .button-toolbar.newtab {
width: 150px;
}
#tabs-container.left:not(:hover) .button-toolbar.newtab,
#tabs-subcontainer.left:not(:hover) .button-toolbar.newtab {
width: 32px;
transition: width 300ms ease-out;
}
/* Additional fix to ensure the tab closes properly */
#tabs-container.left:hover .button-toolbar.newtab:hover,
#tabs-subcontainer.left:hover .button-toolbar.newtab:hover {
width: 150px !important;
}
