create tab_animated_active_border.css

chrome/tab_animated_active_border.css

@@ -0,0 +1,32 @@
+/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0
+See the above repository for updates as well as full license text. */
+
+/* Creates a colorful animated border around active tab */
+
+@keyframes filter{from{ filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) }}
+ 
+.tabbrowser-tab[selected] > .tab-stack::before{
+  grid-area: 1/1;
+  content: "";
+  display: inherit;
+  margin-block: var(--tab-block-margin);
+  border-radius: var(--tab-border-radius);
+  z-index: 0;
+  background-image: conic-gradient(
+    hsl(0 100% 70%),
+    hsl(60 100% 45%) 70deg,
+    hsl(120 100% 55%) 105deg,
+    hsl(160 100% 60%) 160deg,
+    hsl(200 100% 60%) 200deg,
+    hsl(240 100% 65%) 255deg,
+    hsl(300 100% 60%) 290deg,
+    hsl(360 100% 70%) 360deg);
+  background-size: cover;
+  background-position: center;
+  animation: filter steps(30) 2s infinite;
+}
+.tab-background[selected]{
+  border: 1px solid transparent !important;
+  outline: none !important;
+  background-clip: padding-box !important;
+}

html_resources/tagmap.json

@@ -159,5 +159,6 @@
 "window_control_placeholder_support.css":["window-control","patch"],
 "vertical_urlbar_one-off_items.css":["urlbar"],
 "overlay_sidebar_header.css":["sidebar","hack"],
-"compact_extensions_panel.css":["popup","menu","minimal"]
+"compact_extensions_panel.css":["popup","menu","minimal"],
+"tab_animated_active_border.css":["tab","effect","colors"]
 }

tags.csv

@@ -159,3 +159,4 @@ window_control_placeholder_support.css,window-control,patch
 vertical_urlbar_one-off_items.css,urlbar
 overlay_sidebar_header.css,sidebar,hack
 compact_extensions_panel.css,popup,menu,minimal
+tab_animated_active_border.css,tab,effect,colors