Mod: "Opera Look"

Darthagnon

Vivaldi's vanilla "transparent"/"opaque" tab options suck. They both look the same (transparent).

This CSS mod fixes that: Transparent tabs are made transparent. Opaque tabs are opaque. Bonus: the bookmarks bar isn't separated by ugly lines, but now looks more like the standard for other browsers.

Here's an album with screenshots showing what I mean

Note that I use this CSS theme mod by default in Vivaldi, so if any of my other mods look weird, it's because I edited them to work with this.

Here's the CSS; ignore my wordy comments (Thank you for your help, u/TheTiamarth!!!):
tabs.css

/* tabs.css
------------------------------------------------------------------------------------------------------------
by Darren J. de Lima. 
25/04/2019 (v3 release)

Changelog:
v9 - minor update, actually fixed 1px borders now, made sure these functions (mostly relevant to Safari-look) were all in the Safari CSS
v8 - update, fixed 1px tab connectors, restored 1px border below bookmarks bar for consistency and visibility.
v7 - update, fixed bookmark buttons not showing in TheTiamarth's solution
v6 - update, more efficient bookmarks bar merging, thanks to TheTiamarth@reddit
v5 - update, fixed merging bookmarks bar with help from tam710562 @ Vivaldi community
v4 - update, to fix transparent-tabs text being unreadable. Also (tried and fails to) merge bookmark bar with address-bar for a cleaner, more Opera-like look.
v3 - final. split off the additional functions into other files. This is just for the tabs and Opera-look. fixed text readability on background tabs.
v2 - updated to account for menu button, clean downloads panel, transparent speed dial navbar, and adaptive colouring (possibly no longer exact Opera colouration, but close enough). fixed transparent tabs.
v1 - initial release. static colours, requires editing this file to change. exact Opera colouration, though. breaks "transparent tabs"

This file is a.k.a. "opera-look.css".
I used to like Opera 52.
All the default themes in Vivaldi make background tabs disappear, and Vivaldi lacks proper Native windowing in Win10 (which Opera had in Win7).
Default "transparent tabs" in Vivaldi does nothing, so this fixes it, making actual non-trans tabs appear by default.
To make Vivaldi look like Opera, use the following colour options:

------------------------------------------------------------------------------------------------------------
glassy Opera Dark Mode

In-Vivaldi settings: 
Background: #5a5b5c  - Should be the active tab, foreground, bookmarks bar, and top chrome: medium gray
Foreground: #fefefe  - Text and icons: almost white
Highlight: #4e9ce9 or #0190f5  - Toggles and highlights: blue
Accent: chosen default glass colour 
Accent colour from Active Page: Optional - Controls fake glass colour
Apply Accent Colour to Window: Yes  - Sets "Accent" to be the glass colour

What it should look like:
background tab colour: #373738  - Should be the all tabs, separate from glass: very dark gray
active tab colour: same as Background: #5a5b5c (alternatives: #2d2e2e or #343435 or #383839) - Required, to separate it from the background tabs: medium gray
Sidebar/Panels container: #191d1e  - Should be the sidebar: almost black

------------------------------------------------------------------------------------------------------------
glassy modern Opera Light Mode

In-Vivaldi settings: 
Background: #f7f9fa  - Should be the foreground, bookmarks bar, and top chrome, but doesn't include active tab: almost white
Foreground: #3a3d3e  - Text and icons: almost black
Highlight: #4e9ce9 or #0190f5  - Toggles and highlights: blue
Accent: chosen default glass colour  
Accent colour from Active Page: Optional (probs No, as some colours make tab text black) - Controls fake glass colour
Apply Accent Colour to Window: Yes  - Sets "Accent" to be the glass colour

What it should look like:
background tab colour: #dfe5ec  - Should be the all tabs, separate from glass: blue-grey
active tab colour: same as Background: #f7f9fa  - Required, to separate it from the background tabs: almost white
Sidebar/Panels container: #ffffff  - Should be the sidebar: white


------------------------------------------------------------------------------------------------------------
*/


/*------------------------------------------------------------------------------------------------------------
Tabs
*/

/* Background tabs colour (separate from glass) */
.tab:not(.active) {
    background-color: var(--colorBorder) !important;
}

/* Text colour and close button on background tabs: ensure readability at all times */
#browser:not(.ui-transparent-tabs) .tab-header:not(.active) {
	fill: var(--colorFg);
	color: var(--colorFg);
}

/* Make active tab text bold, to identify */
.tab.active {
font-weight: bold;
}

/* Makes "Transparent Tabs" work as expected */
.ui-transparent-tabs .tab:not(.active) {
  background-color: rgba(0, 0, 0, 0.001) !important;
}

/* Get rid of 1px tab bar connector lines */
 #tabs-container {
	border-bottom: 0px;
	border-top: 0px;
 }


/*------------------------------------------------------------------------------------------------------------
Sidebar/Panel
*/

/* Sidebar/Panel colour, darker Opera style */
#switch {
	background-color: var(--colorBorder);
}


/*------------------------------------------------------------------------------------------------------------
New Tab, Trash and Cloud buttons
*/

 /* Idle New Tab, Trash and Cloud buttons */
#browser:not(.ui-transparent-tabs) .toolbar-tabbar > .button-toolbar > button {
  background: var(--colorBorder);
/* min-width: 34px makes the buttons square-looking, but rectangular when rounded. */
  min-width: 30px;
  min-height: 30px; /* alt value: 40px */
  padding: 0;
  opacity: 1;
  fill: var(--colorFgFaded);
}
 
 /* Hover/active New Tab, Trash and Cloud buttons */
#browser:not(.ui-transparent-tabs) .toolbar-tabbar > .button-toolbar > button:hover{
  background:  var(--colorBg);
  transition-duration: 0s, 0s;
  opacity: 1;
  fill: var(--colorFg);
}

/* I could do another set of the above 2 blocks, for when "Transparent Tabs" is activated, but vanilla matches the rest of the UI, so I'll leave it and get some sleep. */


/*------------------------------------------------------------------------------------------------------------
Bookmarks Bar merge into address-bar (recolour bookmarks bar to match address bar, get rid of borders)
Source: 
https://www.reddit.com/r/vivaldibrowser/comments/bibb42/what_css_controls_bookmarks_bar_colour_and/em1qove/
https://www.reddit.com/r/vivaldibrowser/comments/bibb42/what_css_controls_bookmarks_bar_colour_and/em4xphw/
TheTiamarth:
 "This will hide the address bar's bottom border only when the bookmark bar is enabled and in the default state at the top of the window. The only other improvement is that it doesn't need important modifiers."
*/

/* Remove 1px bottom border from address bar when Bookmarks Bar is visible at Top */
.bookmark-bar-top .toolbar-mainbar:after {
	display: none;
}
 
/* force bookmark bar and buttons to use same background color as address bar */
.bookmark-bar,
.bookmark-bar .observer button {
    background-color: var(--colorAccentBg);
}

/* force bookmark bar and buttons to use same background color as address bar when user sets "Apply accent color to window" 
Add ".observer" before "button" if you don't want button highlights on the bookmarks bar. 
*/
.color-behind-tabs-on .bookmark-bar,
.color-behind-tabs-on .bookmark-bar button {
    background-color: var(--colorBg);
}

Darthagnon

NB this mod can be used to "fake" Aero Glass behind the tabs on Windows 10 (remember how pretty aero glass behind browser tabs looked on Win7?)