|
|
@@ -458,10 +458,25 @@ button[name="clear"] {
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
+@keyframes spin {
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
#color-inputs button[name="randomColor"] {
|
|
|
width: 4rem;
|
|
|
font-size: 2.5rem;
|
|
|
border: none;
|
|
|
+ --rotate-time: 0.25s;
|
|
|
+ animation: spin var(--rotate-time) infinite linear paused;
|
|
|
+ transition: rotate calc(var(--rotate-time) * 3) ease-out;
|
|
|
+ rotate: 360deg;
|
|
|
+}
|
|
|
+
|
|
|
+#color-inputs button[name="randomColor"]:hover {
|
|
|
+ animation-play-state: running;
|
|
|
+ rotate: 0deg;
|
|
|
}
|
|
|
|
|
|
#color-inputs input {
|
