Vivaldi Skin

{Spoiler}
#browser {
background: #ff000000 !important;
--addressBarPaddingRight: 137px;
--addressBarPaddingLeft: 34px;
--headerElementsHeight: 34px;
--tabBarPaddingRightToSeeTrashAndSync: 92px;
/* comment out the line below to NOT unify tab bar color with the address bar and bookmark bar*/
--unified: transparent;
--backgroundColor: var(--unified, var(--colorBg));
--backgroundColorAccent: var(--unified, var(--colorAccentBg));
/* comment out the line below to remove the drag region on the bookmark bar and tab bar */
--allowWindowDrag: 1;
}

/* top addressbar above top tabbar */
#header {
padding-top: 0px;
}
/* Remove unnecessary gap at top of tabs */
#tabs-tabbar-container {
padding-top: unset !important;
background-color: #d9d9d9!important;
}
/* Remove line between bookmark bar and tabs */
.bookmark-bar {
border-bottom-width: 0px !important;
border-top-width: 0px !important;
background:url(https://zupimages.net/up/22/42/jmko.png)!important;
background-repeat:x !important;

}
/* Remove line between address bar and bookmark bar */
.address-top {
background:green !important;
}
.toolbar-mainbar {
background: linear-gradient(180deg, #366ab3 , #5e8dcf);
background-repeat:x,y !important;
border-bottom-width: 0px !important;
border-top-width: 0px !important;
height : 48px;
}
.mainbar .toolbar > .button-toolbar, .toolbar > .toolbar-wrap > .button-toolbar, .toolbar > .toolbar-group > .button-toolbar, .toolbar > input {
flex: 0 1 auto;
background: url(https://zupimages.net/up/22/52/23xy.png);
background-size: contain;
}
.toolbar-mainbar .toolbar-extensions, .toolbar-mainbar {
background-color: #f9f9f900;
}
.toolbar-extensions button, .toolbar-mainbar button {
background-color: #e6e6e600;
}
.color-behind-tabs-on .toolbar-mainbar .toolbar-extensions > .button-toolbar > button:hover, .color-behind-tabs-on .toolbar-mainbar > .button-toolbar > button:hover, .color-behind-tabs-on .toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button:hover, .color-behind-tabs-on .toolbar-mainbar > .toolbar-group > .button-toolbar > button:hover, .color-behind-tabs-on .toolbar-mainbar .toolbar-extensions > .button-toolbar > button:active, .color-behind-tabs-on .toolbar-mainbar > .button-toolbar > button:active, .color-behind-tabs-on .toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button:active, .color-behind-tabs-on .toolbar-mainbar > .toolbar-group > .button-toolbar > button:active {
background-color: #ffffff75;
border-radius: 50% 50%;
}
.SearchField, .UrlBar-AddressField {
border: 1px solid #000000!important;
background: linear-gradient(45deg, #ffffff, #f4f4f4);
border-top: 1px solid #000000!important;
border-left: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
border-radius: 0px;
}
.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:before, .address-top .mainbar > .toolbar-mainbar:before {
content: '';
height: 0px;
bottom: 0;
}
.bookmark-bar-top .bookmark-bar {
height: 27px !important;
border-bottom-width: 0px!important;
}
.bookmark-bar .observer {
/* background:url(https://zupimages.net/up/22/42/cunm.png)!important;*/
/*background:url(https://zupimages.net/up/22/52/mwic.png)!important; */
background-color : #366ab3 !important;
background-repeat:repeat !important;
background-size: contain!important;
background: linear-gradient(180deg, #628fc6, #366ab3);
}
.bookmark-bar button {
background:transparent !important;
background-repeat:none !important;
color:white !important;
}
svg.folder-icon .fill-override {
fill: #ffffff !important;
}
.toolbar-mainbar .toolbar-extensions, .toolbar-mainbar {
color: ;

}
/* ------------------- BAR MIDDLE-----------------------*/
#browser:not(.transparent-tabbar.color-accent-from-page.color-behind-tabs-on) #tabs-tabbar-container {
backdrop-filter: var(--backgroundBlur);
background: url(https://zupimages.net/up/22/52/0vtm.png);
background-size: contain;
}
/*---------------------MENU TOP-------------------------*/
.win .topmenu {
background: url(https://zupimages.net/up/22/52/5ybk.png)!important;
height: 30px;
background-size: contain !important;
}
.topmenu {
display: flex;
flex-direction: row-reverse!important;
position: relative;
-webkit-app-region: drag;
}
/*-----------------------------adressbar -------------------------------- */
.win.normal .toolbar-mainbar .toolbar-extensions, .win.normal .toolbar-mainbar {
left: 0;
right: 0;
margin-top: 0px;
margin-bottom: 0px;
}
#browser.native.linux .topmenu, #browser.native.win .topmenu {
background:url(https://zupimages.net/up/22/52/u17r.png)!important;
line-height: initial;
background: url(https://zupimages.net/up/22/52/5ybk.png)!important;
padding-left: 72px;
height: 30px;
background-size: contain !important;
}
#browser.win.win10 #header #titlebar .window-buttongroup {
overflow: hidden;
line-height: initial;
background: url(https://zupimages.net/up/22/52/5ybk.png)!important;
padding-left: 72px;
height: 30px;
background-size: contain !important;
}
.horizontal-menu#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi) {
height: 19px !important;
width: 18px !important;
}
#browser.win.tabs-top #header #titlebar .window-buttongroup button {
height: 20px !important;
color: #366ab3!important;
border-radius: 3px !important;
margin-top: 2px!important;
margin-right: 2px!important;

}
button.window-minimize svg {
margin: -4px !important;
height: 12px !important;
width: 12px !important;
}
.topmenu button.vivaldi-horizontal-icon {
display: none !important;
}
/*-----------------------------TABS --------------------------------------------------------------------------*/
div#tabs-tabbar-container {
height: 32px!important;
}
.tab-position .tab .favicon {
pointer-events: none;
flex: none;
border-radius: 4px;
min-width: 22px;
min-height: 22px;
height: 22px;
padding: 0px;
filter: unset;
width: 23px;
background: #fdfdff17;
border: 3px solid #00000014;
box-shadow: 1px 1px 2px grey;
padding-bottom: 0px;
}
.tab-position .tab .tab-header {
display: flex;
flex: 0 0 32px;
position: relative;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 6px;
overflow: hidden;
align-items: stretch;
line-height: 1;
}
.tabs-top .tab-position .tab:not(.tab-in-accordion):not(.tab-accordion) {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.color-behind-tabs-on .tab-position .tab.unread {
background-image: linear-gradient(178deg,#f1f1f1,#dcdcdc) !important;
border-top: 1px solid #b3b3b3;
border-right: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
}
:not(.ui-transparent-tabs).color-behind-tabs-on .tab-position .tab {
background-image: linear-gradient(180deg,#e2edfe00 5%,#e2edfe00 5%,#b8cdec00 50%,#b8cdec00 20%,#618ec700 20%) !important;
border-top: 0px solid #4e7fd6!important;
border-right: 0px solid #4d7dc1!important;
border-left: 0px solid #4d7dc1!important;
}
#browser .tab-position .tab.active {
background-image: linear-gradient(180deg,#98b9e7 5%,#98b9e7 5%,#5f8bca 50%,#5f8bca 20%,#366ab3 20%) !important;
border-top: 1px solid #4e7fd6!important;
border-right: 1px solid #4d7dc1!important;
border-left: 1px solid #4d7dc1!important;
}
.tab-position .tab .title {
color: #002963;
text-shadow: 0px 1px 2px #0000002e;
}
.tab.active .title{
color:white;
}

.color-behind-tabs-on .bookmark-bar button:focus-visible, .color-behind-tabs-on .bookmark-bar button:hover {
background-color: #ffffff21 !important;
border: 1px solid #ffffff8a !important;
border-radius: 5px !important;
margin: 3px !important;
}

.close {
width: 12px!important;
height: 12px!important;
border: 1px solid grey !important;
border-radius: 5px !important;
opacity: 1 !important;
fill: #748494 !important;
background: linear-gradient(180deg, whitesmoke, transparent)!important;
}
.toolbar-tabbar .newtab > button svg {
width: 25px!important;
height: 23px!important;
border: 1px solid grey !important;
border-radius: 5px !important;
fill: #000000 !important;
background: linear-gradient(180deg, whitesmoke, transparent)!important;
}
/* website */

#main {
position: relative;
flex-direction: column;
background-color: #366ab3;
}
#main > .inner {
display: flex;
flex: 1 1 0;
position: relative;
overflow: hidden;
border-radius: 0px;
background: #002963 !important;
border: 2px solid #002963;
box-shadow: inset 3px 3px 4px black;
}