Replace top gradient PNG with linear-gradient (#166)

paulirish · Mar 2, 2024 · 8fef795 · 8fef795
1 parent bc16d39
commit 8fef795
Showing 1 changed file with 3 additions and 6 deletions.
diff --git a/src/lite-yt-embed.css b/src/lite-yt-embed.css
@@ -15,13 +15,10 @@ lite-youtube::before {
     display: block;
     position: absolute;
     top: 0;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
-    background-position: top;
-    background-repeat: repeat-x;
-    height: 60px;
-    padding-bottom: 50px;
+    /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
+    background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
+    height: 99px;
     width: 100%;
-    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
 }
 
 /* responsive iframe with a 16:9 aspect ratio