Antonio Lucio - Going on a Safari

HKayn

Antonio Lucio demo screenshot

This CSS mod is aimed at making Vivaldi look more like Safari, mainly by moving the tab bar under the address bar.

Click here for download links and installation instructions!

In addition to the tab bar and address bar being on top, your current theme must fulfill a few requirements for this mod to activate:

"Accent on Window" is checked
"Transparent Tab Bar" is not checked

The "full width" style of the tab bar can be deactivated by placing a Command Chain Flag. Click here for a guide on how to set this flag.

This mod is intended to be a spiritual successor to Antonio by swoodipto, which is unfortunately no longer being maintained.

AltCode

@HKayn Great mod! But as a macOS user, it is immediately clear that it was made with window controls on the right in mind (something to fix, I suppose)

Also, I hope you eventually allow (or are considering to allow) the mod to work regardless of what "Accent on Window" and "Transparent Tab Bar" have been set to.

I'm sure you have a good reason for requiring these settings right now. But as someone who uses theme scheduling with multiple themes, these two settings vary for me from one theme to another.

TheAMan006

I thought those were multi row tabs! Imagine how cool multi-row tabs would be with the adressbar neatly on the top.

BohemiaDrinker

@HKayn

Hey! I'm on mac and am a sucker for native looks. Would you be so kind as to point out which parts of your code deal with the full width tabs? I've been achieving the effect by editing bundle.js, but it's a pain. A working CSS solution would be a Godsend.

THX

HKayn

v1.0.4 of Antonio Lucio is now out, fixing a few small bugs.

Click here for the full release notes and downloads.

HKayn

@BohemiaDrinker Hi, sorry for the late response! On my GitHub repo for this mod, you'll find the _tab-bar.scss file which contains the changes I made to the tab bar.

Here's a standalone compilation of my tab bar styles:

.tab-strip {
  display: flex;
  margin-right: 116px;
}
.tab-strip > span {
  display: block;
  flex: 1;
  position: relative;
}
.tab-strip > span:has(> .tab-position > .tab.active) {
  min-width: 30px;
}
.tab-strip > span > .tab-position {
  transform: unset;
  width: unset;
  position: absolute;
  left: 0;
  right: 0;
}
.tab-strip > span > .tab-position .title {
  margin-right: 21px;
  text-align: center;
  display: inline-flex;
  vertical-align: bottom;
  margin-top: 3px;
}
.tab-strip > :has(.newtab) {
  position: absolute;
  left: 100%;
}
.tab-strip > :has(.newtab) .newtab {
  left: 0 !important;
}
.tab-strip .svg-tab-stack {
  width: 100% !important;
  height: calc(100% + 1px);
}
.tab-strip .tab .stack-counter {
  position: absolute;
  right: 0;
}
.tab-strip .tab-position.accordion-toggle-arrow {
  position: static;
  transform: none;
}

.toolbar-tabbar {
  position: absolute;
  right: 0;
  bottom: unset;
}

#browser:not(.alt-tabs) .tab.force-hover .stack-counter {
  right: 24px;
}
#browser:not(.alt-tabs) .tab .close {
  position: absolute;
  right: 0;
}

BohemiaDrinker

@HKayn Thank you very much!

HKayn

v1.1.0 of Antonio Lucio introduces some changes to the bookmark bar to resemble the favorites bar in Safari more closely.

Click here for full release notes and downloads.