create tab_animated_active_border.css

This commit is contained in:
MrOtherGuy 2023-04-09 08:16:38 +03:00
parent 3377abf584
commit e98c0b62a5
3 changed files with 35 additions and 1 deletions

View file

@ -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;
}

View file

@ -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"]
}

View file

@ -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

1 auto_devtools_theme_for_rdm.css,devtools,colors
159 vertical_urlbar_one-off_items.css,urlbar
160 overlay_sidebar_header.css,sidebar,hack
161 compact_extensions_panel.css,popup,menu,minimal
162 tab_animated_active_border.css,tab,effect,colors