From 03ec8bba7f13c0772b46d484be30bcf10410fa5b Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Sun, 17 Nov 2024 19:32:23 +0100
Subject: [PATCH] Fix PipelineFeed spinner overlay and border radius (#4399)

---
 .../layout/header/ActivePipelines.vue         | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/src/components/layout/header/ActivePipelines.vue b/web/src/components/layout/header/ActivePipelines.vue
index 137b70ab7..3f4da9ac8 100644
--- a/web/src/components/layout/header/ActivePipelines.vue
+++ b/web/src/components/layout/header/ActivePipelines.vue
@@ -6,7 +6,7 @@
   >
     <div v-if="pipelineCount > 0" class="spinner" />
     <div
-      class="z-1 flex items-center justify-center h-full w-full font-bold bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-10 rounded-md"
+      class="z-0 flex items-center justify-center h-full w-full font-bold bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-10 rounded-md"
     >
       <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
       {{ pipelineCount > 9 ? '9+' : pipelineCount }}
@@ -31,17 +31,17 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@keyframes spinner-rotate {
+@keyframes rotate {
   100% {
     transform: rotate(1turn);
   }
 }
 .spinner {
-  @apply absolute z-0 inset-1.5 rounded-md;
+  @apply absolute inset-1.5 rounded-md;
   overflow: hidden;
 }
 .spinner::before {
-  @apply absolute -z-2 bg-wp-primary-200 dark:bg-wp-primary-300;
+  @apply absolute bg-wp-primary-200 dark:bg-wp-primary-300;
   content: '';
   left: -50%;
   top: -50%;
@@ -51,11 +51,16 @@ onMounted(async () => {
   background-size:
     50% 50%,
     50% 50%;
-  background-image: linear-gradient(#fff, transparent);
-  animation: spinner-rotate 1.5s linear infinite;
+  background-image: linear-gradient(#fff, #fff);
+  animation: rotate 1.5s linear infinite;
 }
 .spinner::after {
-  @apply absolute inset-0.5 rounded-md bg-blend-darken bg-wp-primary-200 dark:bg-wp-primary-300;
+  @apply absolute inset-0.5 bg-wp-primary-200 dark:bg-wp-primary-300;
+  /*
+  The nested border radius needs to be calculated correctly to look right:
+  https://www.30secondsofcode.org/css/s/nested-border-radius/
+  */
+  border-radius: calc(0.375rem - 0.125rem);
   content: '';
 }
 </style>