Skip to content

Commit ed8db7c

Browse files
HeliodexHeliodex
committed
IMPROVED MERCURY CSS. IMPROVED MERCURY CSS. IMPROVED MERCURY CSS. IMPROVED MERCURY CSS. IMPROVED MERCURY CSS. IMPROVED MERCURY CSS. IMPROVED MERCURY CSS. IMPROVED MERCURY CSS.
1 parent 491fdb1 commit ed8db7c

2 files changed

Lines changed: 311 additions & 4 deletions

File tree

‎Assets/Themes/Standard.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:root {
2-
--hue: 260;
2+
/* --hue: 260; */
3+
animation: hue 10s linear infinite;
34
--mainaccent: hsl(var(--hue) 100 60);
45
--rounding: 0.375rem;
56

@@ -12,3 +13,12 @@
1213
--light-text: hsl(var(--hue) 25 96);
1314
--grey-text: hsl(0 0 55);
1415
}
16+
17+
@keyframes hue {
18+
0% {
19+
--hue: 0;
20+
}
21+
100% {
22+
--hue: 360;
23+
}
24+
}

‎Site/src/global.css‎

Lines changed: 300 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,42 @@
3030
}
3131

3232
* {
33-
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
34-
font-feature-settings: "cv03", "cv04", "cv08", "cv09";
33+
font-family: "Comic Sans MS", cursive, sans-serif;
34+
/* font-feature-settings: "cv03", "cv04", "cv08", "cv09"; */
35+
36+
direction: rtl;
37+
38+
--darker: radial-gradient(
39+
darkred 0%,
40+
brown 14%,
41+
orange 28%,
42+
darkgreen 42%,
43+
darkblue 56%,
44+
indigo 70%,
45+
purple 84%,
46+
darkred 100%
47+
) !important;
48+
--background: linear-gradient(
49+
80deg,
50+
rgb(78, 1, 1) 0%,
51+
rgb(104, 25, 25) 14%,
52+
rgb(124, 81, 2) 28%,
53+
rgb(0, 66, 0) 42%,
54+
rgb(0, 0, 77) 56%,
55+
rgb(51, 0, 87) 70%,
56+
rgb(78, 0, 78) 84%,
57+
rgb(85, 0, 0) 100%
58+
) !important;
59+
--accent: conic-gradient(
60+
rgb(124, 0, 0) 0%,
61+
rgb(192, 125, 0) 14%,
62+
rgb(161, 161, 0) 28%,
63+
green 42%,
64+
blue 56%,
65+
indigo 70%,
66+
rgb(141, 0, 141) 84%,
67+
red 100%
68+
) !important;
3569
}
3670

3771
code {
@@ -42,9 +76,22 @@ code {
4276
color: #d63384;
4377
}
4478

45-
p {
79+
p,
80+
button,
81+
input,
82+
a {
4683
margin: 0;
4784
padding-bottom: 1rem;
85+
font-family: "Times New Roman", Times, serif !important;
86+
}
87+
88+
h1,
89+
h2,
90+
h3,
91+
h4,
92+
h5,
93+
h6 {
94+
font-family: monospace !important;
4895
}
4996

5097
body {
@@ -665,3 +712,253 @@ img[src^="/icons"] {
665712
height: calc(1rem + 2px);
666713
padding-bottom: 2px;
667714
}
715+
716+
/* IT@S THAT TIME OF THE YEAR AGAI!N!!!!!!!!!!!!! */
717+
718+
span {
719+
overflow: scroll;
720+
}
721+
722+
img {
723+
animation:
724+
spin 2.5s ease-in-out infinite,
725+
funny-animation 5s ease-in-out infinite;
726+
}
727+
p {
728+
animation: rainbow 20s linear infinite;
729+
}
730+
button {
731+
animation:
732+
shadow 3s ease-in-out infinite,
733+
funny-animation 4.2s ease-in-out infinite;
734+
}
735+
input {
736+
animation:
737+
marquee 4s ease-in-out infinite,
738+
shadow 3.5s ease-in-out infinite;
739+
}
740+
h1 {
741+
animation: pop2 2s ease-in-out infinite;
742+
}
743+
h2 {
744+
animation: bounce 1s ease-in-out infinite;
745+
}
746+
a {
747+
animation: pop 0.8s ease-in-out infinite;
748+
}
749+
nav {
750+
animation: marquee2 10s ease-in-out infinite;
751+
}
752+
.card {
753+
animation: marquee 10s ease-in-out infinite;
754+
}
755+
textarea,
756+
select {
757+
animation:
758+
spin 2.5s ease-in-out infinite,
759+
pop2 2s ease-in-out infinite;
760+
}
761+
small,
762+
label {
763+
animation:
764+
spin2 8s ease-in-out infinite,
765+
pop 1.6s ease-in-out infinite;
766+
}
767+
fa {
768+
animation: insane 0.8s linear infinite;
769+
}
770+
771+
@keyframes spin {
772+
0% {
773+
transform: rotate(10deg);
774+
filter: hue-rotate(0deg);
775+
}
776+
50% {
777+
transform: rotate(-10deg);
778+
filter: hue-rotate(180deg);
779+
}
780+
100% {
781+
transform: rotate(10deg);
782+
filter: hue-rotate(360deg);
783+
}
784+
}
785+
@keyframes spin2 {
786+
0% {
787+
transform: rotate(50deg);
788+
filter: hue-rotate(0deg);
789+
}
790+
50% {
791+
transform: rotate(-50deg);
792+
filter: hue-rotate(180deg);
793+
}
794+
100% {
795+
transform: rotate(50deg);
796+
filter: hue-rotate(360deg);
797+
}
798+
}
799+
@keyframes rainbow {
800+
0% {
801+
color: #ee82ee;
802+
}
803+
14% {
804+
color: #4b0082;
805+
}
806+
28% {
807+
color: #00f;
808+
}
809+
42% {
810+
color: #008000;
811+
}
812+
57% {
813+
color: #ff0;
814+
}
815+
71% {
816+
color: #ffa500;
817+
}
818+
85% {
819+
color: #f00;
820+
}
821+
100% {
822+
color: #ee82ee;
823+
}
824+
}
825+
@keyframes shadow {
826+
0% {
827+
box-shadow: 0 0rem 0.5rem 0.75rem #008000;
828+
transform: translate(0, 0);
829+
}
830+
33% {
831+
box-shadow: 0 0.5rem 0.5rem 0.5rem #ff0;
832+
transform: translate(0.25rem, 0.25rem);
833+
}
834+
66% {
835+
box-shadow: 0 -0.5rem 0.5rem 1.25rem #f00;
836+
transform: translate(0.25rem, -0.25rem);
837+
}
838+
100% {
839+
box-shadow: 0 0rem 0.25rem 0.75rem #008000;
840+
transform: translate(0, 0);
841+
}
842+
}
843+
@keyframes bounce {
844+
0% {
845+
transform: translateY(0);
846+
}
847+
15% {
848+
transform: translateY(-0.25rem);
849+
}
850+
30% {
851+
transform: translateY(-0.25rem) rotate(5deg);
852+
}
853+
50% {
854+
transform: translateY(0);
855+
}
856+
70% {
857+
transform: translateY(0.25rem);
858+
}
859+
85% {
860+
transform: translateY(0.25rem) rotate(-5deg);
861+
}
862+
100% {
863+
transform: translateY(0);
864+
}
865+
}
866+
@keyframes pop {
867+
0% {
868+
transform: scale(1);
869+
}
870+
50% {
871+
transform: scale(1.1);
872+
}
873+
100% {
874+
transform: scale(1);
875+
}
876+
}
877+
@keyframes pop2 {
878+
0% {
879+
transform: scale(1);
880+
}
881+
50% {
882+
transform: scale(1.05);
883+
}
884+
100% {
885+
transform: scale(1);
886+
}
887+
}
888+
@keyframes marquee {
889+
0% {
890+
transform: translateX(0);
891+
}
892+
33% {
893+
transform: translateX(-5%);
894+
}
895+
66% {
896+
transform: translateX(5%);
897+
}
898+
100% {
899+
transform: translateX(0%);
900+
}
901+
}
902+
@keyframes marquee2 {
903+
0% {
904+
transform: translateY(0);
905+
}
906+
33% {
907+
transform: translateY(-5%);
908+
}
909+
66% {
910+
transform: translateY(5%);
911+
}
912+
100% {
913+
transform: translateY(0%);
914+
}
915+
}
916+
@keyframes funny-animation {
917+
0% {
918+
transform: translate3d(0, 0, 0);
919+
}
920+
25% {
921+
transform: translate3d(0, 20px, 5px) rotate3d(1, 1, 1, 50deg);
922+
}
923+
50% {
924+
transform: translate3d(0, 0, 0);
925+
}
926+
75% {
927+
transform: translate3d(-10px, -20px, -10px) rotate3d(1, 1, 1, -50deg);
928+
}
929+
}
930+
@keyframes insane {
931+
0% {
932+
transform: translate3d(0, 0, 0) rotate(0) scale(1);
933+
}
934+
10% {
935+
transform: translate3d(5px, -5px, 2px) rotate(20deg);
936+
}
937+
20% {
938+
transform: translate3d(-5px, 5px, -2px) rotate(-20deg);
939+
}
940+
30% {
941+
transform: scale(1.2) rotate(10deg);
942+
}
943+
40% {
944+
transform: translate3d(10px, -10px, 5px) rotate(30deg);
945+
}
946+
50% {
947+
transform: translate3d(-10px, 10px, -5px) rotate(-30deg);
948+
}
949+
60% {
950+
transform: scale(0.8) rotate(-10deg);
951+
}
952+
70% {
953+
transform: translate3d(5px, -5px, 2px) rotate(20deg);
954+
}
955+
80% {
956+
transform: translate3d(-5px, 5px, -2px) rotate(-20deg);
957+
}
958+
90% {
959+
transform: scale(1.2) rotate(10deg);
960+
}
961+
100% {
962+
transform: translate3d(0, 0, 0) rotate(0) scale(1);
963+
}
964+
}

0 commit comments

Comments
 (0)