forked from rDrama/rDrama
Adds the replacement gold animation (#227)
Any chance you could push this to only devrama so I can test some edge cases? This seems to be really fast, most of the credit goes to @trihard for making the svg, I just did the lazy drop in bit. Anyways, I don't really have a slow machine to test this on so I'm not sure how much this improves performance but should cut down on repaints Co-authored-by: Mike Hawk <top@rdrama.net> Reviewed-on: rDrama/rDrama#227 Co-authored-by: top <top@noreply.fsdfsd.net> Co-committed-by: top <top@noreply.fsdfsd.net>master
parent
e68b5a780b
commit
edafb4aafe
|
@ -272,11 +272,6 @@
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes move-colors {
|
|
||||||
from {background-position: 0px;}
|
|
||||||
to {background-position: 1000px;}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes lgbt {
|
@keyframes lgbt {
|
||||||
0% { filter: hue-rotate(0deg); }
|
0% { filter: hue-rotate(0deg); }
|
||||||
100% { filter: hue-rotate(360deg); }
|
100% { filter: hue-rotate(360deg); }
|
||||||
|
|
|
@ -8,12 +8,8 @@ lite-youtube, iframe {
|
||||||
}
|
}
|
||||||
|
|
||||||
.gold-text:not(a), h1.gold-text.post-title a, :not(td) > a[href="/h/highrollerclub"]:not(.hole-flair) {
|
.gold-text:not(a), h1.gold-text.post-title a, :not(td) > a[href="/h/highrollerclub"]:not(.hole-flair) {
|
||||||
background: repeating-linear-gradient(
|
background: url("/i/animations/gold_gradient.svg");
|
||||||
45deg,
|
background-size: 200% 200%;
|
||||||
gold,
|
|
||||||
#debd00 20px,
|
|
||||||
#cdae00 60px
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
|
|
|
@ -7611,27 +7611,18 @@ blink {
|
||||||
|
|
||||||
.gold-text:not(a), h1.gold-text.post-title a, :not(td) > a[href="/h/highrollerclub"]:not(.hole-flair) {
|
.gold-text:not(a), h1.gold-text.post-title a, :not(td) > a[href="/h/highrollerclub"]:not(.hole-flair) {
|
||||||
font-family: open sans,sans-serif !important;
|
font-family: open sans,sans-serif !important;
|
||||||
background: repeating-linear-gradient(
|
background: url("/i/animations/gold_gradient.svg") repeat;
|
||||||
45deg,
|
background-size: 200% 200%;
|
||||||
#a78e00,
|
|
||||||
#947d00 20px,
|
|
||||||
#847000 60px
|
|
||||||
);
|
|
||||||
color: transparent !important;
|
color: transparent !important;
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
background-clip: text !important;
|
background-clip: text !important;
|
||||||
-webkit-background-clip: text !important;
|
-webkit-background-clip: text !important;
|
||||||
animation: 60s linear 0s infinite move-colors;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(td) > a[href="/h/highrollerclub"].hole-flair, .effortpost-flair {
|
:not(td) > a[href="/h/highrollerclub"].hole-flair, .effortpost-flair {
|
||||||
font-family: open sans,sans-serif !important;
|
font-family: open sans,sans-serif !important;
|
||||||
background: repeating-linear-gradient(
|
background: url("/i/animations/gold_gradient.svg");
|
||||||
45deg,
|
background-size: 200% 200%;
|
||||||
#a78e00,
|
|
||||||
#947d00 20px,
|
|
||||||
#847000 60px
|
|
||||||
);
|
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
animation: 60s linear 0s infinite move-colors;
|
animation: 60s linear 0s infinite move-colors;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient gradientUnits="userSpaceOnUse" id="myGradient" x1="0" y1="0" x2="60" y2="0">
|
||||||
|
<stop offset="0%" stop-color="gold" />
|
||||||
|
<stop offset="33%" stop-color="#debd00" />
|
||||||
|
<stop offset="100%" stop-color="#cdae00" />
|
||||||
|
</linearGradient>
|
||||||
|
<pattern id="bg" patternUnits="userSpaceOnUse" width="60" height="1" patternTransform="rotate(-45 50 50)">
|
||||||
|
<rect width="100%" height="100%" fill="url(#myGradient)">
|
||||||
|
</rect>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#bg)"></rect>
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
attributeType="XML"
|
||||||
|
type="translate"
|
||||||
|
from="-84.852"
|
||||||
|
to="0"
|
||||||
|
dur="2s"
|
||||||
|
repeatCount="indefinite" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 887 B |
Loading…
Reference in New Issue