MacOS theme for Vivaldi

pro100deb

My theme is for MacOS.

Help improve it. There is a problem when displaying in full screen = ( help fix it. Waiting for your suggestions. How to add transparency as in standard MacOS applications ? The topic code is below.

#browser {
    --addressBarPaddingRight: 0px;
    --headerElementsHeight: 34px;
    --tabBarPaddingRightToSeeTrashAndSync: 92px;
    /* uncomment the line below to unify tab bar color with the address bar's */
    --unified: transparent;
    --backgroundColor: var(--unified, var(--colorBg));
    --backgroundColorAccent: var(--unified, var(--colorAccentBg));
}

/* top addressbar above top tabbar */
#header {
    padding-top: 36px;
}

/* allows mainbar to be positioned absolute */
#main {
    overflow: unset;
    position: unset;
}

.mainbar {
    position: absolute;
    top: 0;
    padding-left: 74px;
    padding-right: var(--addressBarPaddingRight);
    width: 100%;
    z-index: 2 !important;
}

/* not sure if needed... */
/* brings vivaldi button and win controls to front */
#browser.tabs-top #header {
    backdrop-filter: unset;
    contain: unset;
}

#browser.tabs-top.address-top #main {
    overflow: visible;
}

/* Sets tabs to fill entire bar */
#tabs-tabbar-container.top {
    margin-left: 0px !important;
    margin-right: -90px !important;
}

#browser.tabs-top.address-top #tabs-tabbar-container>div {
    padding-left: 2px;
}

/* bookmark bar enabled */
#browser.tabs-top.address-top.bookmark-bar-top #header {
    padding-top: 65px;
}

#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {
    position: fixed;
    top: 34px;
    left: 0;
    right: 0;
}

#browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar {
    top: 41px;
}

/* horizontal menu enabled */
#browser.tabs-top.address-top.horizontal-menu #header {
    --headerElementsHeight: 24px;
}

/* Make window controls same color as menu bar */
#browser.tabs-top.address-top.horizontal-menu .window-buttongroup {
    background-color: var(--colorTabBar);
}

#browser.tabs-top.address-top.horizontal-menu #header {
    padding-top: 38px !important;
}

#browser.tabs-top.address-top.horizontal-menu .topmenu {
    transform: translateY(-38px);
    margin-bottom: 0;
    color: var(--colorFg);
}

#browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container {
    padding-top: 0;
}

#browser.tabs-top.address-top.horizontal-menu .mainbar {
    padding: unset;
    transform: translateY(24px);
}

/* bookmark bar & horizontal menu enabled */
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {
    padding-top: 65px !important;
}

#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {
    transform: translateY(-65px);
}

#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {
    top: 58px !important;
}

/* ---------------------------- */
/*           New Stuff          */
/* ---------------------------- */
/* Shrink height of all the window action buttons */
.window-buttongroup button.window-minimize,
.window-buttongroup button.window-maximize,
.window-buttongroup button.window-close {
    height: var(--headerElementsHeight) !important;
}

/* Shrink height of Vivaldi menu button */
#titlebar button.vivaldi {
    height: var(--headerElementsHeight) !important;
    padding-top: 0;
}

/* Remove empty space to the right of tabs and above tabs*/
#tabs-container {
    padding-right: var(--tabBarPaddingRightToSeeTrashAndSync) !important;
}

#tabs-tabbar-container.top {
    padding-top: unset !important;
}

/* Make other title bar elements have the same color as the address bar elements */
#titlebar button.vivaldi,
.window-buttongroup {
    background-color: var(--backgroundColor);
    z-index: 3 !important;
}

.color-behind-tabs-off #titlebar button.vivaldi,
.color-behind-tabs-off .window-buttongroup {
    background-color: var(--backgroundColorAccent);
}

.toolbar-mainbar .toolbar-extensions,
.toolbar-mainbar {
    background-color: var(--backgroundColor);
}

.color-behind-tabs-off .toolbar-mainbar .toolbar-extensions,
.color-behind-tabs-off .toolbar-mainbar {
    background-color: var(--backgroundColorAccent);
}

/* Fix tabs showing above address bar and search dropdowns */
#tabs-tabbar-container.top {
    z-index: 0;
}

/* Remove line under address bar and extensions bar */
.address-top .mainbar>.toolbar-mainbar .toolbar-extensions:before,
.address-top .mainbar>.toolbar-mainbar:before {
    content: unset;
}

/* Move extension popups down to avoid crossing drag region which leads to dead zone */
.extension-popup.top {
    margin-top: 29px;
}

#browser.tabs-top.address-top.horizontal-menu .extension-popup.top {
    margin-top: 7px;
}

#browser.tabs-top.address-top.bookmark-bar-top .extension-popup.top {
    margin-top: 58px;
}

#browser.tabs-top.address-top.bookmark-bar-top.horizontal-menu .extension-popup.top {
    margin-top: 2px;
}

xdgalaxy2

is there a link for that theme?

nomadic

@pro100deb Just noticed that this is my CSS (Edit: an old version of my CSS) for tabs below the address bar with two padding tweaks for Mac.

https://forum.vivaldi.net/post/598603

You should have posted in that thread if you wanted help with a full screen issue. I like to provide support for my mods to keep them working, but it is hard to do if I don't even know about it. ~~I will take a look tomorrow.~~

Edit: Actually, reading through the thread again, it looks like I already fixed a fullscreen bug with the current version of the mod. You might just need to use the new CSS found in the first post of the thread: https://forum.vivaldi.net/post/446311

xdgalaxy2

@nomadic thank you!

pro100deb

@nomadic I apologize for not linking to your code. Unfortunately, the code from https://forum.vivaldi.net/post/446311 did not work in full screen mode. Help with working code

Снимок экрана 2024-03-25 в 21.03.55.png

xdgalaxy2

@pro100deb can you share your css mac os theme?

pro100deb

@xdgalaxy2 I used the css that is in the first post and the same themes:

nomadic

@pro100deb Sorry, I don't have a Mac for testing and don't see the same problem on Windows. Tried faking a Mac by changing the class on the #browser DIV from .win to .mac, but it wasn't good enough to recreate the issue.

You could maybe try changing the state of the Use Native Window option under vivaldi://settings/appearance/ and then restart the browser.

xdgalaxy2

@nomadic said in MacOS theme for Vivaldi:

i manage to change the window buttons to mac icons, now I'm trying to change the insides to black.