mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-25 03:11:01 +00:00
Code Issues Projects Releases Wiki Activity

Fix PipelineFeed spinner overlay and border radius (#4399)

Browse source
This commit is contained in:
Robert Kaussow 2024-11-17 19:32:23 +01:00 committed by GitHub
parent d2509d3ad1
commit 03ec8bba7f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
web/src/components/layout/header/ActivePipelines.vue
View file

@ -6,7 +6,7 @@
> >
<div v-if="pipelineCount > 0" class="spinner" /> <div v-if="pipelineCount > 0" class="spinner" />
<div <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 --> <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
{{ pipelineCount > 9 ? '9+' : pipelineCount }} {{ pipelineCount > 9 ? '9+' : pipelineCount }}
@ -31,17 +31,17 @@ onMounted(async () => {
</script> </script>
<style scoped> <style scoped>
@keyframes spinner-rotate { @keyframes rotate {
100% { 100% {
transform: rotate(1turn); transform: rotate(1turn);
} }
} }
.spinner { .spinner {
@apply absolute z-0 inset-1.5 rounded-md; @apply absolute inset-1.5 rounded-md;
overflow: hidden; overflow: hidden;
} }
.spinner::before { .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: ''; content: '';
left: -50%; left: -50%;
top: -50%; top: -50%;
@ -51,11 +51,16 @@ onMounted(async () => {
background-size: background-size:
50% 50%, 50% 50%,
50% 50%; 50% 50%;
background-image: linear-gradient(#fff, transparent); background-image: linear-gradient(#fff, #fff);
animation: spinner-rotate 1.5s linear infinite; animation: rotate 1.5s linear infinite;
} }
.spinner::after { .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: ''; content: '';
} }
</style> </style>