Merge pull request #2602 from IvarK/somewhat-standardize-keyframe-names

This commit is contained in:
Waiting Idly 2022-05-19 06:15:50 -07:00 committed by GitHub
commit ac7a1287b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 55 additions and 58 deletions

View File

@ -45,9 +45,9 @@
} }
], ],
"keyframes-name-pattern": [ "keyframes-name-pattern": [
"^([_a-z][a-z0-9]*)([-_]{1,2}[a-z0-9]+)*$", "^a-([-_]{0,2}[a-z0-9]+)*$",
{ {
"message": "Expected keyframe name to be kebab-case" "message": "Keyframe name must begin with `a-` and be kebab-case"
} }
], ],
"selector-id-pattern": [ "selector-id-pattern": [

View File

@ -66,7 +66,7 @@ export function isSecretImport(data) {
export function tryImportSecret(data) { export function tryImportSecret(data) {
const index = secretImportIndex(data); const index = secretImportIndex(data);
if (index === 0 && document.body.style.animation === "") { if (index === 0 && document.body.style.animation === "") {
document.body.style.animation = "barrelRoll 5s 1"; document.body.style.animation = "a-barrel-roll 5s 1";
SecretAchievement(15).unlock(); SecretAchievement(15).unlock();
setTimeout(() => document.body.style.animation = "", 5000); setTimeout(() => document.body.style.animation = "", 5000);
return true; return true;

View File

@ -3,7 +3,7 @@ import { DC } from "./constants";
import { SpeedrunMilestones } from "./speedrun"; import { SpeedrunMilestones } from "./speedrun";
export function bigCrunchAnimation() { export function bigCrunchAnimation() {
document.body.style.animation = "implode 2s 1"; document.body.style.animation = "a-implode 2s 1";
setTimeout(() => { setTimeout(() => {
document.body.style.animation = ""; document.body.style.animation = "";
}, 2000); }, 2000);

View File

@ -93,17 +93,17 @@ dev.tripleEverything = function() {
}; };
dev.barrelRoll = function() { dev.barrelRoll = function() {
document.body.style.animation = "barrelRoll 5s 1"; document.body.style.animation = "a-barrel-roll 5s 1";
setTimeout(() => document.body.style.animation = "", 5000); setTimeout(() => document.body.style.animation = "", 5000);
}; };
dev.spin3d = function() { dev.spin3d = function() {
if (document.body.style.animation === "") document.body.style.animation = "spin3d 3s infinite"; if (document.body.style.animation === "") document.body.style.animation = "a-spin3d 3s infinite";
else document.body.style.animation = ""; else document.body.style.animation = "";
}; };
dev.spin4d = function() { dev.spin4d = function() {
if (document.body.style.animation === "") document.body.style.animation = "spin4d 3s infinite"; if (document.body.style.animation === "") document.body.style.animation = "a-spin4d 3s infinite";
else document.body.style.animation = ""; else document.body.style.animation = "";
}; };

View File

@ -3,7 +3,7 @@ import { DC } from "./constants";
import { SpeedrunMilestones } from "./speedrun"; import { SpeedrunMilestones } from "./speedrun";
export function animateAndDilate() { export function animateAndDilate() {
document.body.style.animation = "dilate 2s 1 linear"; document.body.style.animation = "a-dilate 2s 1 linear";
setTimeout(() => { setTimeout(() => {
document.body.style.animation = ""; document.body.style.animation = "";
}, 2000); }, 2000);
@ -11,7 +11,7 @@ export function animateAndDilate() {
} }
export function animateAndUndilate() { export function animateAndUndilate() {
document.body.style.animation = "undilate 2s 1 linear"; document.body.style.animation = "a-undilate 2s 1 linear";
setTimeout(() => { setTimeout(() => {
document.body.style.animation = ""; document.body.style.animation = "";
}, 2000); }, 2000);

View File

@ -57,7 +57,7 @@ function giveEternityRewards(auto) {
} }
export function eternityAnimation() { export function eternityAnimation() {
document.body.style.animation = "eternify 3s 1"; document.body.style.animation = "a-eternify 3s 1";
setTimeout(() => { setTimeout(() => {
document.body.style.animation = ""; document.body.style.animation = "";
}, 3000); }, 3000);

View File

@ -180,8 +180,8 @@ function triggerManualReality(realityProps) {
export function runRealityAnimation() { export function runRealityAnimation() {
document.getElementById("ui").style.userSelect = "none"; document.getElementById("ui").style.userSelect = "none";
document.getElementById("ui").style.animation = "realize 10s 1"; document.getElementById("ui").style.animation = "a-realize 10s 1";
document.getElementById("realityanimbg").style.animation = "realizebg 10s 1"; document.getElementById("realityanimbg").style.animation = "a-realizebg 10s 1";
document.getElementById("realityanimbg").style.display = "block"; document.getElementById("realityanimbg").style.display = "block";
setTimeout(() => { setTimeout(() => {
document.getElementById("realityanimbg").play(); document.getElementById("realityanimbg").play();

View File

@ -915,7 +915,7 @@ GameDatabase.news = [
id: "a174", id: "a174",
text: text:
`<span style='font-family: runescape; color: yellow; text-shadow: 0.1rem 0.1rem black; letter-spacing: 0.1rem; `<span style='font-family: runescape; color: yellow; text-shadow: 0.1rem 0.1rem black; letter-spacing: 0.1rem;
font-size: 2rem; line-height: 0; animation: text-flash 1s steps(1, end) infinite;' font-size: 2rem; line-height: 0; animation: a-text-flash 1s steps(1, end) infinite;'
>FREE RUNE ARMOR TRIMMING</span>`, >FREE RUNE ARMOR TRIMMING</span>`,
}, },
{ {
@ -992,12 +992,12 @@ GameDatabase.news = [
{ {
id: "a184", id: "a184",
text: text:
`<span style='animation: text-grow 1s infinite'>R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝ `<span style='animation: a-text-grow 1s infinite'>R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝
"Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠</span><span style='animation: text-shrink 1s infinite'> "Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠</span><span style='animation: a-text-shrink 1s infinite'>
Ḁ̷̛͂̈́͗̎̃̓͛́͘ͅW̶̡̖͓̗̦̃̇̌̀͝A̵͇̭͉̓̎̈̿̊́̄̚͜R̶̝͚̲̭͎͇͎͓͖͚͇̀̈́͗̃̏̂̌͝͝Ę̴̡̤͙͈̝̬̰͒͘</span><span style Ḁ̷̛͂̈́͗̎̃̓͛́͘ͅW̶̡̖͓̗̦̃̇̌̀͝A̵͇̭͉̓̎̈̿̊́̄̚͜R̶̝͚̲̭͎͇͎͓͖͚͇̀̈́͗̃̏̂̌͝͝Ę̴̡̤͙͈̝̬̰͒͘</span><span style
='animation: text-grow 1s infinite'> ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘</span><span style='animation: ='animation: a-text-grow 1s infinite'> ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘</span><span style='animation:
text-shrink 1s infinite'> ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕ a-text-shrink 1s infinite'> ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕
</span><span style='animation: text-grow 1s infinite'> ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓ </span><span style='animation: a-text-grow 1s infinite'> ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓
R̸̡̛̛̪̝̟̱̣̹̭̟̣̀̈̀̏̉̌͝͠Õ̶͙͈͖̠͇̬͍̟̰U̵̩̫͉̝͔̼͎̦̔̓̽͌͊̏̇̓̀̓̀Ņ̸͍͇̘̙̥̰͉̲͕͈̥̍͛̃̑͝Ḑ̵̤̻̖̱̘̯̝̖̈̌̄̕͝ R̸̡̛̛̪̝̟̱̣̹̭̟̣̀̈̀̏̉̌͝͠Õ̶͙͈͖̠͇̬͍̟̰U̵̩̫͉̝͔̼͎̦̔̓̽͌͊̏̇̓̀̓̀Ņ̸͍͇̘̙̥̰͉̲͕͈̥̍͛̃̑͝Ḑ̵̤̻̖̱̘̯̝̖̈̌̄̕͝
Ī̶̜̱̈́̑̃̉̄̋̔͐͋͠Ṅ̴͎̞͍̽͊͛̈́̅͛̈̅̚͠Ģ̸̢̾͊S̷̫̼̜̼͇̋͛̎͑͆̅̓̇</span>`, Ī̶̜̱̈́̑̃̉̄̋̔͐͋͠Ṅ̴͎̞͍̽͊͛̈́̅͛̈̅̚͠Ģ̸̢̾͊S̷̫̼̜̼͇̋͛̎͑͆̅̓̇</span>`,
}, },
@ -1014,10 +1014,10 @@ GameDatabase.news = [
{ {
id: "a186", id: "a186",
text: text:
`<span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span style='animation: text-grow 1s infinite `<span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span style='animation: a-text-grow 1s infinite
'>\\(^_^)\\</span> <span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span style='animation: '>\\(^_^)\\</span> <span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span style='animation:
text-grow 1s infinite'>\\(^_^)\\</span> <span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span a-text-grow 1s infinite'>\\(^_^)\\</span> <span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span
style='animation: text-grow 1s infinite'>\\(^_^)\\</span>`, style='animation: a-text-grow 1s infinite'>\\(^_^)\\</span>`,
}, },
{ {
id: "a187", id: "a187",
@ -1083,7 +1083,7 @@ GameDatabase.news = [
random *= 255; random *= 255;
const color = `hsl(${random}, 90%, 60%)`; const color = `hsl(${random}, 90%, 60%)`;
return `<span style='color: ${color}; text-shadow: 0 0 0.5rem ${color}; return `<span style='color: ${color}; text-shadow: 0 0 0.5rem ${color};
animation: text-grow 0.4s infinite;'>Disco Time!</span>`; animation: a-text-grow 0.4s infinite;'>Disco Time!</span>`;
}, },
}, },
{ {
@ -1352,8 +1352,8 @@ GameDatabase.news = [
id: "a238", id: "a238",
get text() { get text() {
return `AD Player: "How many orders of magnitude are you on?" Normal person: "Like, maybe 5 or 6 right now, my return `AD Player: "How many orders of magnitude are you on?" Normal person: "Like, maybe 5 or 6 right now, my
dude." AD Player: "You are like a little baby. Watch this: <span style='animation: text-crunch ${newsAnimSpd(22)}s dude." AD Player: "You are like a little baby. Watch this: <span style='animation: a-text-crunch
1; font-size: 0;'>C R O N C H</span>"`; ${newsAnimSpd(22)}s 1; font-size: 0;'>C R O N C H</span>"`;
}, },
}, },
{ {
@ -1441,7 +1441,7 @@ GameDatabase.news = [
}, },
{ {
id: "a246", id: "a246",
text: "<span style='animation: fade-out 3s infinite'>OoooOOOOooOOO, it's me, the infamous news ghost!</span>", text: "<span style='animation: a-fade-out 3s infinite'>OoooOOOOooOOO, it's me, the infamous news ghost!</span>",
}, },
(function() { (function() {
let isFlipped = false; let isFlipped = false;
@ -1505,7 +1505,7 @@ GameDatabase.news = [
{ {
id: "a252", id: "a252",
get text() { get text() {
return `<span style='animation: text-stretch ${newsAnimSpd(30)}s 1'>This message is dilated.</span>`; return `<span style='animation: a-text-stretch ${newsAnimSpd(30)}s 1'>This message is dilated.</span>`;
}, },
}, },
{ {
@ -2256,7 +2256,7 @@ GameDatabase.news = [
{ {
id: "a352", id: "a352",
get text() { get text() {
return `<span style='opacity: 0; animation: disappear ${newsAnimSpd(20)}s 1'> return `<span style='opacity: 0; animation: a-disappear ${newsAnimSpd(20)}s 1'>
This news message is antimemetic. You will forget that it exists shortly.</span>`; This news message is antimemetic. You will forget that it exists shortly.</span>`;
} }
}, },

View File

@ -509,7 +509,6 @@ button:focus {
position: absolute; position: absolute;
right: 0.5rem; right: 0.5rem;
bottom: 0.5rem; bottom: 0.5rem;
animation: weee 4s infinite;
} }
.o-time-study-selection-btn { .o-time-study-selection-btn {
@ -1130,26 +1129,25 @@ br {
} }
} }
/* stylelint-disable-next-line keyframes-name-pattern */ @keyframes a-barrel-roll {
@keyframes barrelRoll {
0% { transform: rotateZ(0deg); } 0% { transform: rotateZ(0deg); }
50%, 50%,
100% { transform: rotateZ(360deg); } 100% { transform: rotateZ(360deg); }
} }
@keyframes spin3d { @keyframes a-spin3d {
0% { transform: rotate3d(5.2, -2.8, 1.4, 0deg); } 0% { transform: rotate3d(5.2, -2.8, 1.4, 0deg); }
100% { transform: rotate3d(5.2, -2.8, 1.4, 360deg); } 100% { transform: rotate3d(5.2, -2.8, 1.4, 360deg); }
} }
@keyframes spin4d { @keyframes a-spin4d {
0%, 0%,
100% { transform: scale(1) rotate3d(5.2, -2.8, 1.4, 0deg); } 100% { transform: scale(1) rotate3d(5.2, -2.8, 1.4, 0deg); }
50% { transform: scale(0) rotate3d(5.2, -2.8, 1.4, 360deg); } 50% { transform: scale(0) rotate3d(5.2, -2.8, 1.4, 360deg); }
} }
@keyframes float { @keyframes a-float {
0% { 0% {
bottom: 0; bottom: 0;
opacity: 0; opacity: 0;
@ -1165,7 +1163,7 @@ br {
} }
} }
@keyframes implode { @keyframes a-implode {
0%, 0%,
100% { 100% {
transform: scale(1); transform: scale(1);
@ -1178,7 +1176,7 @@ br {
} }
} }
@keyframes eternify { @keyframes a-eternify {
0% { 0% {
opacity: 1; opacity: 1;
filter: blur(0); filter: blur(0);
@ -1220,7 +1218,7 @@ br {
} }
} }
@keyframes dilate { @keyframes a-dilate {
0% { 0% {
opacity: 1; opacity: 1;
transform: scaleX(1); transform: scaleX(1);
@ -1242,7 +1240,7 @@ br {
} }
} }
@keyframes undilate { @keyframes a-undilate {
0% { 0% {
opacity: 1; opacity: 1;
transform: scaleX(1); transform: scaleX(1);
@ -1264,14 +1262,14 @@ br {
} }
} }
@keyframes realize { @keyframes a-realize {
0% { opacity: 1; } 0% { opacity: 1; }
20% { opacity: 0; } 20% { opacity: 0; }
80% { opacity: 0; } 80% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
} }
@keyframes realizebg { @keyframes a-realizebg {
0% { opacity: 0; } 0% { opacity: 0; }
20% { opacity: 0; } 20% { opacity: 0; }
30% { opacity: 1; } 30% { opacity: 1; }
@ -1280,41 +1278,41 @@ br {
100% { opacity: 0; } 100% { opacity: 0; }
} }
@keyframes text-grow { @keyframes a-text-grow {
0% { font-size: 1.3rem; } 0% { font-size: 1.3rem; }
50% { font-size: 1.8rem; } 50% { font-size: 1.8rem; }
100% { font-size: 1.3rem; } 100% { font-size: 1.3rem; }
} }
@keyframes text-shrink { @keyframes a-text-shrink {
0% { font-size: 1.8rem; } 0% { font-size: 1.8rem; }
50% { font-size: 1.3rem; } 50% { font-size: 1.3rem; }
100% { font-size: 1.8rem; } 100% { font-size: 1.8rem; }
} }
@keyframes text-crunch { @keyframes a-text-crunch {
0% { font-size: 1.5rem; } 0% { font-size: 1.5rem; }
90% { font-size: 1.5rem; } 90% { font-size: 1.5rem; }
100% { font-size: 0; } 100% { font-size: 0; }
} }
@keyframes text-flash { @keyframes a-text-flash {
0% { color: yellow; } 0% { color: yellow; }
50% { color: red; } 50% { color: red; }
} }
@keyframes fade-out { @keyframes a-fade-out {
0% { opacity: 1; } 0% { opacity: 1; }
50% { opacity: 0; } 50% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
} }
@keyframes disappear { @keyframes a-disappear {
0% { opacity: 1; } 0% { opacity: 1; }
100% { opacity: 0; } 100% { opacity: 0; }
} }
@keyframes text-stretch { @keyframes a-text-stretch {
0% { letter-spacing: 0; } 0% { letter-spacing: 0; }
100% { letter-spacing: 30rem; } 100% { letter-spacing: 30rem; }
} }
@ -9343,7 +9341,7 @@ input.o-automator-block-input {
font-family: "Font Awesome 6 Free" !important; font-family: "Font Awesome 6 Free" !important;
} }
@keyframes opacity { @keyframes a-opacity {
0% { opacity: 0; } 0% { opacity: 0; }
50% { opacity: 0.4; } 50% { opacity: 0.4; }
100% { opacity: 0; } 100% { opacity: 0; }
@ -9362,7 +9360,7 @@ input.o-automator-block-input {
left: 0; left: 0;
background: gold; background: gold;
border-radius: var(--var-border-radius, inherit); border-radius: var(--var-border-radius, inherit);
animation: opacity 3s infinite; animation: a-opacity 3s infinite;
} }
.o-celestial-nav__hoverable .tooltiptext { .o-celestial-nav__hoverable .tooltiptext {

View File

@ -45,18 +45,17 @@ body.t-s1 {
z-index: 0; z-index: 0;
opacity: 1; opacity: 1;
background-image: url("../images/snow1.png"), url("../images/snow2.png"), url("../images/snow3.png"); background-image: url("../images/snow1.png"), url("../images/snow2.png"), url("../images/snow3.png");
animation: snow 10s linear infinite, snowFade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite; animation: a-snow 10s linear infinite, a-snow-fade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
pointer-events: none; pointer-events: none;
} }
@keyframes snow { @keyframes a-snow {
0% { background-position: 0 0, 0 0, 0 0; } 0% { background-position: 0 0, 0 0, 0 0; }
50% { background-position: 500px 500px, 100px 200px, -100px 150px; } 50% { background-position: 500px 500px, 100px 200px, -100px 150px; }
100% { background-position: 1000px 1000px, 200px 400px, -200px 300px; } 100% { background-position: 1000px 1000px, 200px 400px, -200px 300px; }
} }
/* stylelint-disable-next-line keyframes-name-pattern */ @keyframes a-snow-fade {
@keyframes snowFade {
0% { opacity: 0; } 0% { opacity: 0; }
50% { opacity: 1; } 50% { opacity: 1; }
100% { opacity: 0; } 100% { opacity: 0; }

View File

@ -9,10 +9,10 @@ body {
.t-s3 .time-theorem-buttons, .t-s3 .time-theorem-buttons,
.t-s3 .sidebar, .t-s3 .sidebar,
.t-s3 .c-glyph-tooltip { .t-s3 .c-glyph-tooltip {
animation: glasses 7s infinite; animation: a-glasses 7s infinite;
} }
@keyframes glasses { @keyframes a-glasses {
0% { filter: blur(0); } 0% { filter: blur(0); }
10% { filter: blur(3px); } 10% { filter: blur(3px); }
20% { filter: blur(0); } 20% { filter: blur(0); }

View File

@ -63,6 +63,6 @@ export default {
} }
.t-s3 .o-save-timer { .t-s3 .o-save-timer {
animation: glasses 7s infinite; animation: a-glasses 7s infinite;
} }
</style> </style>

View File

@ -186,12 +186,12 @@ export default {
background: black; background: black;
} }
@keyframes roll { @keyframes a-roll {
100% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); }
} }
.pelle-icon { .pelle-icon {
animation: roll infinite 8s linear; animation: a-roll infinite 8s linear;
} }
.o-celestial-quote-history { .o-celestial-quote-history {