diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-14 10:21:56 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-14 10:21:56 +0900 |
| commit | 8c97c54cfacd201e480dffb73db3fd0124532edb (patch) | |
| tree | 676460f2318867865237f3ce11defd23afe72228 /packages/frontend/src/components/MkRippleEffect.vue | |
| parent | :art: (diff) | |
| download | misskey-8c97c54cfacd201e480dffb73db3fd0124532edb.tar.gz misskey-8c97c54cfacd201e480dffb73db3fd0124532edb.tar.bz2 misskey-8c97c54cfacd201e480dffb73db3fd0124532edb.zip | |
refactor(frontend): use css modules
Diffstat (limited to 'packages/frontend/src/components/MkRippleEffect.vue')
| -rw-r--r-- | packages/frontend/src/components/MkRippleEffect.vue | 16 |
1 files changed, 5 insertions, 11 deletions
diff --git a/packages/frontend/src/components/MkRippleEffect.vue b/packages/frontend/src/components/MkRippleEffect.vue index 9d93211d5f..60c3a47385 100644 --- a/packages/frontend/src/components/MkRippleEffect.vue +++ b/packages/frontend/src/components/MkRippleEffect.vue @@ -1,7 +1,7 @@ <template> -<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"> +<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"> <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"> - <circle fill="none" cx="64" cy="64"> + <circle fill="none" cx="64" cy="64" style="stroke: var(--accent);"> <animate attributeName="r" begin="0s" dur="0.5s" @@ -22,7 +22,7 @@ /> </circle> <g fill="none" fill-rule="evenodd"> - <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color"> + <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color" style="stroke: var(--accent);"> <animate attributeName="r" begin="0s" dur="0.8s" @@ -100,17 +100,11 @@ onMounted(() => { }); </script> -<style lang="scss" scoped> -.vswabwbm { +<style lang="scss" module> +.root { pointer-events: none; position: fixed; width: 128px; height: 128px; - - > svg { - > circle { - stroke: var(--accent); - } - } } </style> |