theme-store/themes/ae7868dc-1fa1-469e-8b89-a5edf7ab1f24/chrome.css
Tanay Kar 0b0b7d1bb0
Update chrome.css
Added a better fade out animation
2024-12-28 21:46:40 +05:30

54 lines
1.3 KiB
CSS

@media (-moz-bool-pref: "zen.view.use-single-toolbar") {
#zen-appcontent-wrapper {
position: relative !important;
background-color: transparent !important;
}
#zen-appcontent-wrapper::before {
content: "" !important;
position: absolute !important;
top: 2px !important;
left: 6px !important;
height: 4px !important;
max-width: calc(100% - 16px) !important;
width: var(--bar-pcent) !important;
background-color: var(--bar-colour) !important;
border-radius: 4px;
pointer-events: none !important;
transition: background-color 0.2s ease-in-out, width 0.5s ease-in-out !important;
}
#main-window {
&:has(.tabbrowser-tab[selected][busy]) {
--bar-colour: white;
--bar-pcent: 10%;
}
&:has(.tabbrowser-tab[selected][busy][pendingicon]) {
--bar-colour: white;
--bar-pcent: 50%;
}
&:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) {
--bar-colour: white;
--bar-pcent: 80%;
}
&:has(.tabbrowser-tab[selected][busy][progress]) {
--bar-colour: white;
--bar-pcent: 100%;
}
&:has(.tabbrowser-tab[selected][muted]:not([busy])) {
--bar-colour: orangered;
--bar-pcent: 100%;
}
&:has(.tabbrowser-tab[selected]:not([muted]):not([busy])) {
--bar-colour: transparent;
--bar-pcent: 0%;
}
}
}