finxol.io
Personal blog
finxol.io
blog
fix: hover state and colours
+20
-5
+20
-5
app/components/Country.vue
+20
-5
app/components/Country.vue
···
16
16
</script>
17
17
18
18
<template>
19
-
<div v-if="data" class="hidden md:flex flex-row items-center gap-2">
19
+
<div v-if="data" class="hidden sm:flex flex-row items-center gap-2">
20
20
<div class="tooltip-target flex flex-row items-center gap-2 bg-stone-200/50 dark:bg-stone-700/60 py-1 px-2 rounded-lg">
21
21
I'm in
22
22
<span class="flex flex-row items-center gap-2 font-bold">
···
33
33
</template>
34
34
35
35
<style scoped>
36
-
.tooltip-target:hover + .anchored-tooltip {
37
-
display: block;
36
+
.tooltip-target:hover + .anchored-tooltip,
37
+
.anchored-tooltip:hover {
38
+
@supports (anchor-name: --infobox) {
39
+
display: block;
40
+
}
38
41
}
39
42
40
43
.tooltip-target {
···
44
47
.anchored-tooltip {
45
48
@apply text-stone-200;
46
49
47
-
--bg-color: oklch(0.3272 0.0197 88.15 / 80%);
50
+
--bg-color: oklch(0.2685 0.0063 34.3 / 70%); /* bg-stone-800/70 */
48
51
49
52
display: none;
50
53
51
54
position-anchor: --infobox;
52
55
position: absolute;
53
56
margin: 0;
54
-
top: calc(anchor(top) + 3rem);
57
+
top: calc(anchor(top) + 2.7rem);
55
58
left: calc(anchor(center));
56
59
transform: translateX(-50%);
57
60
bottom: anchor(bottom);
···
62
65
text-align: center;
63
66
background-color: var(--bg-color);
64
67
border-radius: 0.5rem;
68
+
animation: fade-in 200ms ease-in-out;
65
69
66
70
&::before {
67
71
content: "";
···
72
76
border-width: 10px 10px 0 10px;
73
77
border-style: solid;
74
78
border-color: var(--bg-color) transparent transparent transparent;
79
+
}
80
+
81
+
@keyframes fade-in {
82
+
from {
83
+
opacity: 0;
84
+
transform: translateX(-50%) translateY(-10px);
85
+
}
86
+
to {
87
+
opacity: 1;
88
+
transform: translateX(-50%) translateY(0);
89
+
}
75
90
}
76
91
}
77
92
</style>