Major ui revamp

Respects accent colour of workspace
New design implementation
Glance working
This commit is contained in:
Tanay Kar 2025-05-05 19:30:45 +05:30 committed by GitHub
parent 2e27bdad86
commit 3a95ef2b26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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