create tab_loading_progress_bar.css

This commit is contained in:
MrOtherGuy 2022-06-25 07:09:46 +03:00
parent 0f23af615e
commit 6d16966886
3 changed files with 36 additions and 1 deletions

View file

@ -0,0 +1,33 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_loading_progress_bar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This style creates a fake loading progress bar to the bottom of a tab as a replacement for normal loading throbber */
@keyframes tab-loading-line-anim{ from{ background-size: 0% } to { background-size: 20% } }
.tab-background::after{
background-size: 90%;
}
.tabbrowser-tab:is([busy],[bursting]) > .tab-stack > .tab-background::after{
content: "";
display: -moz-box;
height: 2px;
background-color:transparent;
background-repeat: no-repeat;
background-image: linear-gradient(currentColor,currentColor);
transition: background-size 80ms ease-out;
}
.tabbrowser-tab[busy]:not([progress],[bursting]) > .tab-stack > .tab-background::after{
animation: tab-loading-line-anim 80ms ease;
background-size: 20%;
opacity: 0.5;
}
.tabbrowser-tab[busy][progress] > .tab-stack > .tab-background::after{
transition-duration: 2000ms;
}
.tabbrowser-tab[bursting] > .tab-stack > .tab-background::after{
transition: background-size 80ms ease-out, opacity 80ms linear;
background-size: 100%;
opacity: 0;
}
.tab-throbber{ display: none !important; }
.tab-icon-image[src]{ display: -moz-box !important; }

View file

@ -152,5 +152,6 @@
"window_control_fallback_for_custom_windows_theme.css":["window-control","buttons","colors","patch"], "window_control_fallback_for_custom_windows_theme.css":["window-control","buttons","colors","patch"],
"window_control_force_linux_system_style.css":["window-control","buttons","icon"], "window_control_force_linux_system_style.css":["window-control","buttons","icon"],
"window_control_placeholder_support.css":["window-control","patch"], "window_control_placeholder_support.css":["window-control","patch"],
"fake_tab_tooltip.css":["tab","hack","popup"] "fake_tab_tooltip.css":["tab","hack","popup"],
"tab_loading_progress_bar.css":["tab","effect"]
} }

View file

@ -152,3 +152,4 @@ window_control_fallback_for_custom_windows_theme.css,window-control,buttons,colo
window_control_force_linux_system_style.css,window-control,buttons,icon window_control_force_linux_system_style.css,window-control,buttons,icon
window_control_placeholder_support.css,window-control,patch window_control_placeholder_support.css,window-control,patch
fake_tab_tooltip.css,tab,hack,popup fake_tab_tooltip.css,tab,hack,popup
tab_loading_progress_bar.css,tab,effect

1 auto_devtools_theme_for_rdm.css,devtools,colors
152 window_control_force_linux_system_style.css,window-control,buttons,icon
153 window_control_placeholder_support.css,window-control,patch
154 fake_tab_tooltip.css,tab,hack,popup
155 tab_loading_progress_bar.css,tab,effect