Zen Browser Adaptive Tab Bar Color extension Support

userChrome.css

/*
This is a cleaned-up and minimalized fork of RayZ3R0's ZenConfig available under
https://github.com/RayZ3R0/ZenConfig/blob/384d8a2ed293bc4ae43609f535123c2f144ee748/userChrome.css
adding support for the Adaptive Tab Bar Color extension.

Originally licensed under the MIT licence Copyright (c) 2024 Rayyan Ahsan.
Modified 2024 by LeMoonStar.

This CSS does not work with the "Allow light tab bar" option of the Adaptive Tab Bar Color extension.
Tested on 1.0.1-a.19 and 1.0.1-t.20(2024-11-24)
*/

/* Make the top toolbar appear as attached to the webview */
#browser {
    &:not(:has(.zen-split-view-splitter)) {
        #nav-bar {
            /* Actually apply the color from the Adaptive Tab Bar Color extension */
            background-color: var(--lwt-accent-color) !important;
            /* Make the Toolbar rounded at the top */
            border-radius: 15px 15px 0px 0px !important;
            /* Make sure the icons have a healthy distance from the rounded corners */
            padding-left: 6px !important;
            padding-right: 6px !important;
            /* Keep some space between the window border and the top toolbar */
            margin-top: 6px !important;
            /* Fix some alignment issues */
            margin-left: 1px !important;
        }

        /* Remove the top rounding from the webview (Possibly not needed in Zen versions 1.0.1-a.19) */
        .browserContainer {
            border-radius: 0px 0px 15px 15px !important;
        }
    }

}

/* Make the webview appear attached to the top toolbar */
.browserSidebarContainer {
    /* Remove the top shadow */
    box-shadow: 0 0 0 0px transparent !important;
    /* Remove the top padding, which is only useful with a rounded corner */
    padding: 0px !important;
    /* Remove the top rounding from the webview */
    border-radius: 0px 0px 15px 15px !important;
}

You may want to considder using this userChrome.css by u/rAlteredStateOfMind on reddit instead.