doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Share button: a thin, slowly turning rainbow ring (reduced-motion safe)

Browse source
This commit is contained in:
swift-river542 2026-09-16 20:20:36 -05:00
parent b7d91e9aca
commit d5d6c9231f
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
library/components/map-controls/ShareButton.vue
View file

@ -31,6 +31,16 @@ import MapControlButton from './MapControlButton.vue'
/* Shadow-DOM styles */
/* ------------------------------------------------------------------ */
useShadowStyles(`
/* ---- share button: a thin, slowly turning rainbow ring behind the round button ---- */
.share-wrap{position:relative;display:inline-block;border-radius:50%;}
.share-wrap::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;pointer-events:none;
background:conic-gradient(from var(--share-ring-angle,0deg),#ff6b6b,#ffd166,#6bd67b,#4dabf7,#9775fa,#f783ac,#ff6b6b);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0.55;animation:share-ring-turn 6s linear infinite;}
.share-wrap:hover::before{opacity:0.9;}
@property --share-ring-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes share-ring-turn{to{--share-ring-angle:360deg;}}
@media(prefers-reduced-motion:reduce){.share-wrap::before{animation:none;}}
/* ---- popover shell ---- */
/* ---- popover shell (imitates SemanticTreeLegend .stl-inner) ---- */
.share-pop{
@ -496,7 +506,7 @@ onBeforeUnmount(() => {
</script>
<template>
<div style="position:relative;">
<div class="share-wrap">
<MapControlButton
ref="btnEl"
:is-dark="isDark"