CSS broken after new update

remi.flores

hello there,

My CSS is completly broken after the new snapshot release...
6.7.3327.3

I don't have the rounded webview anymore, and most importently my tab hover on the left (like edge) is not working anymore.

anybody have issues with their css with the last update ?

I paste my CSS just below, maybe someone will be able to help me.

/*panel on hover*/
.tabbar-wrapper .tabbar-wrapper,
#tabs-container.left,
#tabs-subcontainer.left,
#tabs-container.right,
#tabs-subcontainer.right,
.button-toolbar.workspace-popup.tabbar-workspace-button {
    min-width: 32px;
    transition: min-width 200ms ease-out !important;
}

.tabbar-wrapper .tabbar-wrapper:hover,
#tabs-container.left:hover,
#tabs-subcontainer.left:hover,
#tabs-container.right:hover,
#tabs-subcontainer.right:hover,
.button-toolbar.workspace-popup.tabbar-workspace-button:hover {
    min-width: 200px !important;
    transition-delay: 70ms !important;
}

.button-toolbar.workspace-popup.tabbar-workspace-button:hover:has(+ #tabs-tabbar-container > #tabs-subcontainer) {
    min-width: 232px !important;
    transition-delay: 70ms !important;
}

.tabbar-wrapper .tabbar-wrapper:hover:has(#tabs-tabbar-container > #tabs-subcontainer) {
    min-width: 232px !important;
    transition-delay: 400ms !important;
}

.button-toolbar.workspace-popup.tabbar-workspace-button > button {
    justify-content: left !important;
}

#browser:not(.alt-tabs) .tab-position .tab:hover.tab-small:not(.tab-mini).active .title,
#browser:not(.alt-tabs) .tab-position .tab.force-hover.tab-small:not(.tab-mini).active .title {
    display: flex !important;
}

.tabbar-workspace-button {
    width: 100% !important;
}

#tabs-tabbar-container.left,
#tabs-tabbar-container.right {
    width: auto !important;
    min-width: 32px;
}

.button-toolbar.newtab {
    left: 0px !important;
    width: 200px;
}

#main .inner > div:has(#tabs-tabbar-container:is(.left, .right)) {
  position: absolute;
  z-index: 2;
  opacity: 1;
  background-color: var(--colorBg);
  height: 100% !important;
}

#main
  .inner
  > div:has(#tabs-tabbar-container)
  #tabs-subcontainer:is(.left, .right)
  .toolbar
  .button-toolbar {
  position: static;
}

#main
  .inner
  > div:has(#tabs-tabbar-container):hover
  #tabs-subcontainer:is(.left, .right)
  .toolbar
  .button-toolbar {
  position: relative;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover)
  > div.overflow
  .tab-strip {
  overflow-y: hidden;
}

#main:has(#tabs-tabbar-container.left) #panels-container {
  margin-left: 60px;
}


/* header reduce height */
.win #tabs-container:not(.none).top,
#browser.win:not(.native).address-top
  .toolbar:has(.window-buttongroup.on-mainbar) {
  padding-right: unset;
}
.alt#browser.win:not(.native).address-top
  .toolbar:has(.window-buttongroup.on-mainbar) {
  padding-left: unset;
}
.alt.disable-titlebar.address-top#browser:not(.tabs-top) .vivaldi {
  top: unset;
}
#browser.win.address-top .toolbar:has(.window-buttongroup.on-mainbar) {
  min-height: calc(35px / var(--uiZoomLevel));
}
#browser.win.address-top
  .toolbar:has(.window-buttongroup.on-mainbar)
  .vivaldi {
  height: 35px;
  width: 34px;
  margin: 0;
  padding: 0;
}
#browser.win.address-top
  .toolbar:has(.window-buttongroup.on-mainbar)
  .vivaldi
  svg {
  fill-opacity: 0.33;
}
#browser.win.address-top
  .toolbar:has(.window-buttongroup.on-mainbar)
  .vivaldi
  .expand-arrow {
  display: none;
}
#browser.win.address-top .toolbar:has(.window-buttongroup.on-mainbar) {
  min-height: unset !important;
  padding-right: calc(46px * 3) !important;
}

/*rounded webview*/
#main, #main > .inner{
    overflow:visible;    
}

#main > .inner{
    background:var(--colorTabBar);
    /* background:red; */
}

#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack{
    border-radius:var(--radiusCap);
}

#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-light #webpage-stack{
    box-shadow: var(--webview-shadow-light);
}
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-dark #webpage-stack{
    box-shadow: var(--webview-shadow-dark);
}

#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack:has(.tiled .visible),
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack:has(.mosaic .visible){
    box-shadow: none;
}


#webview-container {
    margin-left: 34px;
    margin-bottom: 5px;
	margin-right: 5px;
}

.disable-titlebar#browser.win .window-buttongroup {
    height: 34px;
}

.toolbar-large .button-circularimage.button-cropimage.profile-popup button img {
    height: 23px;
    width: 23px;
}

#main:has(#tabs-tabbar-container.left) #panels-container {
    margin-left: 0px;
}

stardepp

@remi-flores Snapshots are Beta Vivaldi, so it is normal that there may be errors. So test your .css in a Stable Vivaldi.

remi.flores

@stardepp edit : I downgraded Vivaldi to 6.7.3316.3 snapshot and no problem at all, my css works again.

mib2berlin

@remi-flores
Hi, not good to downgrade, your user profile is now broken.
The last snapshot change the Chromium version from 122 to 124, this seems to break your .css.
It is not a solution to downgrade or you have to stay on 3316.3 forever.

Cheers, mib

remi.flores

@mib2berlin I did a proper uninstall / reinstall to downgrade so no problem

DoctorG

@remi-flores Uninstall/reinstall does not fix a profile.
The problem is that a used Vivaldi profile with newer Chromium 124 core is not compatible with the one from older 122.
If you use profile from 124 core in a Vivaldi with 122 core, the data will break and cause unfixable issues.

mib2berlin

@remi-flores
Hi, if you removed user data during uninstall this work.
It is more or less a clean install.

oudstand

But it's still not a good idea
If you know how to check the CSS selectors, you should replace them in your code.

remi.flores

@oudstand I'm still trying to fix my issue with the latest snapshot, but I can't find what's wrong

I'm quite new to css, i'm inspecting the window to see what are the elements that needs to be touched. But yeah, can't find any solution.

If someone has time to help ^^

luetage

@remi-flores You should ask at the source. I assume you haven’t written the CSS. Post in the original topic for help, then every user of the mod benefits from a fix, because it will be updated and they get notified. No point in opening new topics for existing mods.

ffuser1

fwiw, my code to hide the new tab button also broke with this update. I'll look at it if the code changes that broke this become permanent.

.toolbar.toolbar-tabbar.toolbar-large.tab-position {display:none}

luetage

@ffuser1 .button-toolbar.newtab {display: none} Anyway, updates regularly break mods. Inspect the UI, find the selector and rewrite it. We have guides for that, see pinned topics.