Vivaldi Slim

/* Vivaldi Slim */

/* Slim Main */

/* Changes the size of the of the mainbar background. */
.mainbar {
    height: 37px;
}

#browser.win.address-top .toolbar:has(.window-buttongroup.on-mainbar),
#browser.linux.address-top .toolbar:has(.window-buttongroup.on-mainbar) {
    min-height: calc(32px / var(--uiZoomLevel));
}

/* Pushes the security and bookmark buttons back down, because the above rule will push everything up, including these and they do not need to be pushed up. */
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput
    > .button-toolbar
    > button:not(:hover):not(:active):not(:focus):not(.button-pressed),
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput
    > .toolbar-group
    > .button-toolbar
    > button:not(:hover):not(:active):not(:focus):not(.button-pressed) {
    margin-top: 2px;
}

/* Resizes the maximize, minimize and close buttons to be in-line with the mainbar. */
.disable-titlebar#browser.win .window-buttongroup {
    height: 36px;
}

.toolbar-mainbar .toolbar-extensions > .button-toolbar > button:first-of-type {
    min-height: 32px;
    margin-top: 3px;
}

/* Aligns hamburger/Vivaldi button. */
.disable-titlebar.address-top#browser:not(.tabs-top) .vivaldi {
    margin-top: 2px;
}

/* Pushes the URL bar up to be centered with the new mainbar size. */
.UrlBar-SearchField,
.UrlBar-AddressField {
    height: 24px;
    margin-top: 3px;
    margin-bottom: 1px;
}

/* Pushes the content blocker button up to be in-line with the URL bar, and ensures that it doesn't move when hovering over it. */
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput
    > .button-toolbar
    > button,
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput
    > .toolbar-group
    > .button-toolbar
    > button {
    margin: 2px 0 2px 0;
}

/* Left and Right Style Tabs - Removes the larger forehead padding on the workspace icon in the side-tabs view, making it more size-matched with the tab icons. */
.tabbar-workspace-button + #tabs-tabbar-container.left,
.tabbar-workspace-button + #tabs-tabbar-container.right {
    padding-top: 0;
}

/* Left and Right Style Tabs - Removes margins around Workspace icon to be in-line with tabs in icon-only mode. */
#app .tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button button,
#app
    .tabs-right
    .button-toolbar.workspace-popup.tabbar-workspace-button
    button {
    margin: 0;
}

/* Centers mainbar icons. */
.color-behind-tabs-on
    .toolbar-mainbar
    .toolbar-extensions
    > .button-toolbar
    > button:hover,
.color-behind-tabs-on
    .toolbar-mainbar
    .page-zoom-controls
    > .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
    .page-zoom-controls
    > .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
    .page-zoom-controls
    > .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
    .page-zoom-controls
    > .toolbar-group
    > .button-toolbar
    > button:active,
.color-behind-tabs-on
    .toolbar-mainbar
    > .toolbar-group
    > .button-toolbar
    > button:active,
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button,
.toolbar-mainbar .page-zoom-controls > .button-toolbar > button,
.toolbar-mainbar > .button-toolbar > button,
.toolbar-mainbar
    .toolbar-extensions
    > .toolbar-group
    > .button-toolbar
    > button,
.toolbar-mainbar
    .page-zoom-controls
    > .toolbar-group
    > .button-toolbar
    > button,
.toolbar-mainbar > .toolbar-group > .button-toolbar > button {
    margin-bottom: 2px;
}

.button-toolbar > button {
    margin-top: 4px;
}

/* End Slim Main*/

/* Additionals */

/* Center Bookmarks */
.bookmark-bar .observer {
    justify-content: center;
}

/* Expanding Left Tabs */

/* Animate the tabs, set initial width. */
#tabs-tabbar-container.left {
    transition: all 250ms ease !important;
    width: 30px;
}

#tabs-tabbar-container.left:hover {
    width: 250px !important;
}

.tabbar-wrapper {
    position: absolute !important;
    z-index: 200 !important;
    height: 100% !important;
    transition: all 250ms ease !important;
    width: 30px;
}

.tabbar-wrapper:hover {
    width: 250px !important;
}

#webview-container {
    margin-left: 30px;
}

@media all and (display-mode: fullscreen) {
    #webview-container {
        margin-left: 0 !important;
    }
}

/* Shunt the status info (text on hover) over to accomodate tabs */
#webview-container ~ .StatusInfo {
    left: 36px !important;
}

.newtab {
    opacity: 0;
}

#tabs-tabbar-container.left:hover .newtab {
    opacity: 1 !important;
    transition: opacity 200ms ease 250ms;
}

/* End Additionals */