Make service icon rotate (woodpecker-ci#3149)

add animation for color blind people [video](https://cloud.obermui.de/s/adpxqpMw6dEgZcC/download/recording_woodpecker-pull-3148.mkv)
quintoandar · Feb 1, 2024 · 2f8474d · 2f8474d
1 parent 168d846
commit 2f8474d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/web/src/components/repo/pipeline/PipelineStatusIcon.vue b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
@@ -11,6 +11,7 @@
         'text-wp-state-ok-100': pipelineStatusColors[status] === 'green',
         'text-wp-state-info-100': pipelineStatusColors[status] === 'blue',
         'text-wp-state-warn-100': pipelineStatusColors[status] === 'orange',
+        'rotate-animation': service && pipelineStatusColors[status] === 'blue',
       }"
     />
   </div>

diff --git a/web/src/style.css b/web/src/style.css
@@ -150,3 +150,16 @@ body,
 .code-box-inline {
   @apply bg-wp-code-200 rounded-md text-wp-code-text-100;
 }
+
+/* TODO(2194): https://tailwindcss.com/docs/animation */
+@keyframes rotate-kf {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.rotate-animation {
+  animation: rotate-kf 2s linear infinite;
+}