caelestia/zen/userChrome.css

:root {
    --c-accent: var(--tab-loading-fill);
    --c-text: var(--toolbar-color);
    --c-mantle: var(--lwt-accent-color);
    --c-base: var(--tabpanel-background-color);
    --c-surface0: var(--tab-selected-bgcolor);
    --c-surface1: var(--arrowpanel-border-color);

    --zen-primary-color: var(--c-surface0) !important;
    --zen-colors-primary: var(--c-accent) !important;
    --zen-colors-secondary: var(--c-surface0) !important;
    --zen-colors-tertiary: var(--c-base) !important;
    --zen-colors-border: var(--c-surface1) !important;
    --toolbarbutton-icon-fill: var(--c-accent) !important;
    --toolbarbutton-icon-fill-attention: var(--c-accent) !important;
    --toolbarbutton-icon-fill-attention-text-light: var(--c-text) !important;
    --toolbarbutton-icon-fill-attention-text-dark: var(--c-base) !important;
    --lwt-text-color: var(--c-text) !important;
    --toolbar-field-color: color-mix(in srgb, var(--c-text), transparent 15%) !important;
    --toolbar-field-focus-color: color-mix(in srgb, var(--c-text), transparent 10%) !important;
    --arrowpanel-color: var(--c-text) !important;
    --arrowpanel-background: var(--c-base) !important;
    --lwt-sidebar-text-color: var(--c-text) !important;
    --lwt-sidebar-background-color: var(--c-mantle) !important;
    --toolbar-bgcolor: var(--c-surface0) !important;
    --newtab-background-color: var(--c-base) !important;
    --zen-themed-toolbar-bg: var(--c-mantle) !important;
    --zen-main-browser-background: var(--c-mantle) !important;
    --urlbarView-highlight-color: var(--c-text) !important;
    --in-content-primary-button-text-color: var(--c-text) !important;
    --in-content-primary-button-background: var(--toolbarbutton-hover-background) !important;
    --in-content-primary-button-background-hover: var(--toolbarbutton-active-background) !important;
}

tooltip {
    appearance: none !important;
    background-color: var(--c-mantle) !important;
    color: var(--c-text) !important;
    border: 1px solid color-mix(in srgb, var(--c-accent), transparent 70%) !important;
    border-radius: 8px !important;
}

#permissions-granted-icon {
    color: var(--c-mantle) !important;
}

.sidebar-placesTree {
    background-color: var(--c-base) !important;
}

#urlbar-background {
    background-color: var(--c-surface0) !important;
}

#TabsToolbar {
    background-color: var(--c-mantle) !important;
}

.content-shortcuts {
    background-color: var(--c-base) !important;
    border-color: var(--c-accent) !important;
}

.urlbarView-url {
    color: var(--c-accent) !important;
}

#zenEditBookmarkPanelFaviconContainer {
    background: var(--c-mantle) !important;
}

toolbarbutton {
    fill: var(--c-accent) !important;
}

toolbar .toolbarbutton-1 {
    &:not([disabled]) {
        &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
            fill: var(--c-mantle) !important;
        }
    }
}

#autoscroller {
    width: 50px !important;
    height: 50px !important;
}

#urlbar-container {
    background: var(--c-mantle) !important;
}

/* Center url bar text when not focused */
#urlbar:not([focused]) .urlbar-input {
    text-align: center !important;
}

/* Floating url bar appear animation + shift down */
@keyframes floating-urlbar-show {
    0% {
        opacity: 0;
        scale: 0.8;
        translate: -10% 0;
    }

    70% {
        scale: 1.02;
        translate: 1% 0;
    }

    100% {
        opacity: 1;
        scale: 1;
        translate: 0 0;
    }
}

#urlbar[breakout-extend] {
    animation: 200ms floating-urlbar-show ease-out;
}

/* Blur menu popups */
#commonDialog,
.menupopup-arrowscrollbox {
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--arrowpanel-border-color), transparent 70%) !important;
    background: color-mix(in srgb, var(--arrowpanel-background), transparent 15%) !important;
    backdrop-filter: blur(25px) !important;
}

#commonDialog {
    background: color-mix(in srgb, var(--zen-branding-bg), transparent 15%) !important;
}

/* Blur floating url bar */
#urlbar[zen-floating-urlbar][breakout][breakout-extend] > #urlbar-background {
    border: 1px solid color-mix(in srgb, var(--zen-colors-border), transparent 70%) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--zen-colors-tertiary), transparent 15%) !important;
    backdrop-filter: blur(25px) !important;
}

#urlbar[breakout-extend] .urlbar-input-container {
    padding-top: 7px !important;
    padding-bottom: 0px !important;
}

.urlbarView-body-inner {
    border: none !important;
}

/* Styles the search options */
.search-one-offs {
    border-top: none !important;
    padding: 4px !important;
    margin: 0px 0px 7px 0px !important;
}

.searchbar-engine-one-off-item {
    border-radius: 8px !important;
    margin-right: 3px !important;
}

#urlbar-anon-search-settings {
    margin-right: 0px !important;
}

/* Border/outline transition fix */
* {
    border: 0px solid transparent;
    outline: 0px solid transparent;
}

/* Dim unloaded tabs */
.tabbrowser-tab[pending] {
    filter: grayscale(1);
    opacity: 0.5;
}

/* Animations */
:is(
        .tab-background,
        .toolbarbutton-icon,
        .toolbarbutton-badge-stack,
        .toolbarbutton-1,
        .bookmark-item,
        .PanelUI-zen-profiles-item,
        .download-state,
        .urlbarView-row,
        .urlbarView-action,
        .searchbar-engine-one-off-item,
        #urlbar-search-mode-indicator,
        #tracking-protection-icon-container,
        #page-action-buttons > *,
        #identity-box > *,
        toolbarbutton,
        toolbaritem,
        button,
        menu,
        menuitem,
        tab
    ):not(#urlbar-container, #personal-bookmarks) {
    transition: all 0.15s ease !important;

    &:is(tab) {
        transition: scale 0.15s ease !important;
    }

    &:is(:active, :not(tab)[open]) {
        scale: 0.95 !important;
    }
}