From aca3302c6f63feccbd693b672f583c479f2e7431 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Tue, 1 Sep 2020 12:17:02 +0300 Subject: [PATCH] Add the style rules --- chrome/tab_line_loading_indicator.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/chrome/tab_line_loading_indicator.css b/chrome/tab_line_loading_indicator.css index f141488..99258bd 100644 --- a/chrome/tab_line_loading_indicator.css +++ b/chrome/tab_line_loading_indicator.css @@ -1,3 +1,26 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_line_loading_indicator.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ +/* Hide the normal loading indicator (just show tab-icon instead) and make the top tab-line bounce left-to-right */ + +@keyframes tabline-anim{from{background-position-x: left}to{background-position-x: right}} +.tab-line{ + transform: none !important; + background-color: transparent !important; + background-image: linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)); + background-repeat: no-repeat !important; + background-size: 100%; + transition: background-size 80ms linear !important; +} + +.tabbrowser-tab[busy] > stack > .tab-background > .tab-line{ + background-size: 10% !important; + background-image: linear-gradient(var(--tab-line-color),var(--tab-line-color)); + opacity: 0.7 !important; + animation: tabline-anim 400ms alternate infinite ease-in-out; +} + +.tab-line[selected]{ background-image: linear-gradient(var(--tab-line-color),var(--tab-line-color)); opacity: 1 !important; } + +.tabbrowser-tab .tab-throbber{ display: none } +.tabbrowser-tab .tab-icon-image{ display: -moz-box !important; }