@media (-moz-bool-pref: "zen.view.use-single-toolbar") { .browserSidebarContainer.deck-selected::before { content: "" !important; position: absolute !important; top: 0px !important; left: 0px !important; height: 4px !important; /* Height of the top background */ max-width: 100% !important; width: var(--bar-pcent) !important; /* Ensure full width or customizable width */ background-color: var(--bar-colour) !important; /* Solid color for the bar */ border-radius: 0 2px 2px 0; /* Adjust this value to control the roundness of the ends */ z-index: 1 !important; transition: width 0.5s ease-in-out, background 0.2s ease !important; /* Apply smooth transition on width and background */ } /* Current tab loading progress and muted status */ .browserSidebarContainer.deck-selected:has([zen-glance-selected])::before, .browserSidebarContainer.deck-selected.zen-glance-overlay::before { max-width: calc(85%) !important; left: calc(15%/2) !important; border-radius: 6px !important; } .browserSidebarContainer.deck-selected.zen-glance-background::before { background: transparent !important; height: 0px !important; } :root { &:has(.tabbrowser-tab[selected][busy]) { --bar-colour: var(--zen-primary-color); --bar-pcent: 15%; } &:has(.tabbrowser-tab[selected][busy][pendingicon]) { --bar-colour: var(--zen-primary-color); --bar-pcent: 45%; } &:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) { --bar-colour: var(--zen-primary-color); --bar-pcent: 85%; } &:has(.tabbrowser-tab[selected][busy][progress]) { --bar-colour: var(--zen-primary-color); --bar-pcent: 95%; } &:has(.tabbrowser-tab[selected][muted]:not([busy])) { --bar-colour: orangered; --bar-pcent: 100%; .browserSidebarContainer.deck-selected::before { border-radius: 0; } } } }