forked from rDrama/rDrama
342 lines
7.4 KiB
CSS
342 lines
7.4 KiB
CSS
/*generic*/
|
|
|
|
#awards-container {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 1029;
|
|
}
|
|
|
|
.stackable-container > div {
|
|
position: absolute;
|
|
}
|
|
|
|
.stackable-container div, .stackable-container img, .ricardo {
|
|
animation-iteration-count: infinite !important;
|
|
animation-timing-function: linear !important;
|
|
}
|
|
|
|
|
|
/*emoji*/
|
|
|
|
.emoji-award img, .emoji-hz-award img {
|
|
width: min(60px, 13vw) !important;
|
|
}
|
|
|
|
.emoji-award:nth-child(even) {
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
.emoji-award:nth-child(2) img, .emoji-award:nth-child(3) img, .emoji-award:nth-child(6) img, .emoji-award:nth-child(7) img, .emoji-award:nth-child(10) img, .emoji-award:nth-child(11) img, .emoji-award:nth-child(14) img, .emoji-award:nth-child(15) img, .emoji-award:nth-child(18) img, .emoji-award:nth-child(19) img {
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
@keyframes emojiX {
|
|
100% {
|
|
transform: translateX(98vw);
|
|
}
|
|
}
|
|
@keyframes emojiY {
|
|
100% {
|
|
transform: translateY(80vh);
|
|
}
|
|
}
|
|
|
|
.emoji-award {
|
|
animation: emojiX 8s alternate;
|
|
}
|
|
.emoji-award img {
|
|
animation: emojiY 9s alternate;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.emoji-award {
|
|
animation: emojiX 6s alternate;
|
|
}
|
|
.emoji-award img {
|
|
animation: emojiY 7s alternate;
|
|
}
|
|
}
|
|
|
|
.emoji-hz-award:nth-child(odd) {
|
|
animation-direction: reverse;
|
|
}
|
|
.emoji-hz-award:nth-child(odd) img {
|
|
transform: scaleX(-1);
|
|
}
|
|
.emoji-hz-award:nth-child(1), .emoji-hz-award:nth-child(5), .emoji-hz-award:nth-child(9), .emoji-hz-award:nth-child(13), .emoji-hz-award:nth-child(17) {
|
|
top: 2%;
|
|
}
|
|
.emoji-hz-award:nth-child(2), .emoji-hz-award:nth-child(6), .emoji-hz-award:nth-child(10), .emoji-hz-award:nth-child(14), .emoji-hz-award:nth-child(18) {
|
|
top: 27%;
|
|
}
|
|
.emoji-hz-award:nth-child(3), .emoji-hz-award:nth-child(7), .emoji-hz-award:nth-child(11), .emoji-hz-award:nth-child(15), .emoji-hz-award:nth-child(19) {
|
|
top: 52%;
|
|
}
|
|
.emoji-hz-award:nth-child(4), .emoji-hz-award:nth-child(8), .emoji-hz-award:nth-child(12), .emoji-hz-award:nth-child(16), .emoji-hz-award:nth-child(20) {
|
|
top: 77%;
|
|
}
|
|
|
|
|
|
@keyframes emoji-hz {
|
|
0% {
|
|
transform: translateX(-10vw);
|
|
}
|
|
100% {
|
|
transform: translateX(110vw);
|
|
}
|
|
}
|
|
|
|
.emoji-hz-award {
|
|
animation: emoji-hz 12s;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.emoji-hz-award {
|
|
animation: emoji-hz 6s;
|
|
}
|
|
}
|
|
|
|
.animation-delay-1 {
|
|
animation-delay: 1s !important;
|
|
}
|
|
.animation-delay-2 {
|
|
animation-delay: 2s !important;
|
|
}
|
|
.animation-delay-3 {
|
|
animation-delay: 3s !important;
|
|
}
|
|
.animation-delay-4 {
|
|
animation-delay: 4s !important;
|
|
}
|
|
|
|
.emoji-award, .emoji-hz-award {
|
|
transform: translateX(-10vw);
|
|
}
|
|
|
|
.emoji-hz-award img.reversed {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.emoji-hz-award:nth-child(odd) img.reversed {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
/*confetti*/
|
|
.confetti {
|
|
background-image: url(/i/confetti2.webp);
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
/*fireworks*/
|
|
.firework img {
|
|
max-width: min(15vw,15rem);
|
|
}
|
|
|
|
/*ricardo*/
|
|
.ricardo {
|
|
position: absolute !important;
|
|
overflow: hidden !important;
|
|
bottom: 0;
|
|
}
|
|
.ricardo img {
|
|
max-height: min(15vw,100px);
|
|
}
|
|
|
|
.ricardo1 {animation: ricardo1Xa 5.8s, ricardo1Xb 11.6s, ricardo1Y 23.2s;}
|
|
.ricardo2 {animation: ricardo2 8.5s;}
|
|
.ricardo3 {animation: ricardo3 10s;}
|
|
|
|
@keyframes ricardo1Xa {
|
|
0% {right: -200px}
|
|
50% {right: 200px}
|
|
100% {right: -200px}
|
|
}
|
|
|
|
@keyframes ricardo1Xb {
|
|
0%{left: unset}
|
|
49% {left: unset}
|
|
50% {left: -200px}
|
|
75% {left: 200px}
|
|
100% {left: -200px}
|
|
}
|
|
|
|
@keyframes ricardo1Y {
|
|
0% {bottom: 20vh}
|
|
24% {bottom: 20vh}
|
|
25% {bottom: 60vh}
|
|
49% {bottom: 60vh}
|
|
50% {bottom: 10vh}
|
|
74% {bottom: 10vh}
|
|
75% {bottom: 50vh}
|
|
99% {bottom: 50vh}
|
|
100% {bottom: 20vh}
|
|
}
|
|
|
|
|
|
@keyframes ricardo2 {
|
|
0% { opacity: 1; left: 0; right: unset;}
|
|
18% {opacity: 0; left: 0; right: unset;}
|
|
19% {opacity: 0; left: unset; right: 20vw;}
|
|
20% {opacity: 1; left: unset; right: 20vw;}
|
|
38% {opacity: 0; left: unset; right: 20vw;}
|
|
39% {opacity: 0; left: 20vw; right: unset;}
|
|
40% {opacity: 1; left: 20vw; right: unset;}
|
|
58% {opacity: 0; left: 20vw; right: unset;}
|
|
59% {opacity: 0; left: unset;right: 60vw;}
|
|
60% {opacity: 1; left: unset; right: 60vw;}
|
|
78% {opacity: 0; left: unset; right: 60vw;}
|
|
79% {opacity: 0; left: 80vw; right: unset;}
|
|
80% {opacity: 1; left: 80vw; right: unset;}
|
|
98% {opacity: 0; left: 80vw; right: unset;}
|
|
99% {opacity: 0; left: 0; right: unset;}
|
|
100% {opacity: 1; left: 0; right: unset;}
|
|
}
|
|
|
|
@keyframes ricardo3 {
|
|
50% {transform: translateX(100vw); top: unset; bottom: 0;}
|
|
51% {transform: translateX(100vw) rotate(180deg); top: 0; bottom: unset;}
|
|
100% {transform: translateX(-15vw) rotate(180deg); top: 0; bottom: unset;}
|
|
}
|
|
|
|
|
|
.tilt-post {
|
|
transform: rotate(0.3deg);
|
|
}
|
|
.tilt-post > * {
|
|
padding-left: 3rem !important;
|
|
padding-right: 3rem !important;
|
|
}
|
|
|
|
|
|
.tilt-comment-1 {
|
|
transform: rotate(2deg);
|
|
}
|
|
.tilt-comment-2 {
|
|
transform: rotate(4deg);
|
|
}
|
|
.tilt-comment-3 {
|
|
transform: rotate(6deg);
|
|
}
|
|
.tilt-comment-4 {
|
|
transform: rotate(8deg);
|
|
}
|
|
|
|
.rainbow-text:not(a), h1.rainbow-text.post-title a {
|
|
background: repeating-linear-gradient(
|
|
135deg,
|
|
violet,
|
|
#b25eee 20px,
|
|
lightblue 40px,
|
|
green 60px,
|
|
yellow 80px,
|
|
orange 100px,
|
|
#ff7f7f 120px
|
|
);
|
|
color: transparent !important;
|
|
font-weight: 700 !important;
|
|
background-clip: text !important;
|
|
-webkit-background-clip: text !important;
|
|
animation: 60s linear 0s infinite move-colors;
|
|
}
|
|
|
|
.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;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
gold,
|
|
#debd00 20px,
|
|
#cdae00 60px
|
|
);
|
|
color: transparent !important;
|
|
font-weight: 700 !important;
|
|
background-clip: text !important;
|
|
-webkit-background-clip: text !important;
|
|
animation: 60s linear 0s infinite move-colors;
|
|
}
|
|
|
|
.queen:not(a) img, .queen:not(.ectoplasm), h1.queen.post-title a {
|
|
color: hotpink !important;
|
|
font-weight: 700 !important;
|
|
text-transform: lowercase !important;
|
|
}
|
|
|
|
.sharpen:not(a):not(.blood), h1.sharpen.post-title a {
|
|
color: red !important;
|
|
font-weight: bold !important;
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.sharpen-0:after {
|
|
background: url("/i/sharpen/0.webp?x=7");
|
|
}
|
|
.sharpen-1:after {
|
|
background: url("/i/sharpen/1.webp?x=7");
|
|
}
|
|
.sharpen-2:after {
|
|
background: url("/i/sharpen/2.webp?x=7");
|
|
}
|
|
.sharpen-3:after {
|
|
background: url("/i/sharpen/3.webp?x=7");
|
|
}
|
|
.sharpen-4:after {
|
|
background: url("/i/sharpen/4.webp?x=7");
|
|
}
|
|
.sharpen-5:after {
|
|
background: url("/i/sharpen/5.webp?x=7");
|
|
}
|
|
.sharpen-6:after {
|
|
background: url("/i/sharpen/6.webp?x=7");
|
|
}
|
|
.sharpen-7:after {
|
|
background: url("/i/sharpen/7.webp?x=7");
|
|
}
|
|
.sharpen-8:after {
|
|
background: url("/i/sharpen/8.webp?x=7");
|
|
}
|
|
.sharpen-9:after {
|
|
background: url("/i/sharpen/9.webp?x=7");
|
|
}
|
|
|
|
.rainbow-text:not(a) > p, .gold-text:not(a) > p {
|
|
color: transparent !important;
|
|
}
|
|
|
|
.rainbow-text del, .gold-text del {
|
|
color: var(--black);
|
|
font-weight: 400;
|
|
}
|
|
|
|
@keyframes move-colors {
|
|
from {background-position: 0px;}
|
|
to {background-position: 1000px;}
|
|
}
|
|
|
|
@keyframes lgbt {
|
|
0% { filter: hue-rotate(0deg); }
|
|
100% { filter: hue-rotate(360deg); }
|
|
}
|
|
|
|
.zozbot, [pride_username], :not(td) > a[href="/h/countryclub"]:not(.hole-flair) {
|
|
color: red;
|
|
animation: lgbt 3s linear infinite;
|
|
}
|
|
|
|
[pride_username].patron, :not(td) > a[href="/h/countryclub"].hole-flair {
|
|
background-color: red;
|
|
animation: lgbt 2s linear infinite;
|
|
}
|
|
|
|
:not(td) > a[href="/h/highrollerclub"].hole-flair {
|
|
font-family: open sans,sans-serif !important;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
gold,
|
|
#debd00 20px,
|
|
#cdae00 60px
|
|
);
|
|
font-weight: 700 !important;
|
|
background-clip: text !important;
|
|
animation: 60s linear 0s infinite move-colors;
|
|
}
|