9,821
edits
Changes
Jump to navigation
Jump to search
Template:Relatable suite (view source)
Revision as of 00:15, 25 January 2024
, 00:15, 25 January 2024doesnt work but let it be known i damn tried
Line 1:
Line 1:
{{#css:
{{#css:
+@property --inner{
+ syntax: '<color>';
+ initial-value: #FEA3E0;
+ inherits: false;
+}
+@property --middle{
+ syntax: '<color>';
+ initial-value: #fff985;
+ inherits: false;
+}
+@property --outer{
+ syntax: '<color>';
+ initial-value: #37D2FF;
+ inherits: false;
+}
body {
body {
animation: color-change 2s ease infinite;
animation: color-change 2s ease infinite;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: fixed;
+ background-image: radial-gradient(var(--inner) 0%, var(--middle) 50%, var(--outer) 100%);
}
}
#mw-page-base {
#mw-page-base {
Line 16:
Line 32:
}
}
@keyframes color-change {
@keyframes color-change {
−0%,100% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); }
+0%,100% { --inner:#FEA3E0; --middle:#fff985; --outer:#37D2FF; }
−33% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); }
+33% { --inner:#37D2FF; --middle:#FEA3E0; --outer:#fff985; }
−66% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); }
+66% { --inner:#fff985; --middle:#37D2FF; --outer:#FEA3E0; }
}
}
}}
}}