57 lines
No EOL
1 KiB
Text
57 lines
No EOL
1 KiB
Text
---
|
|
const { tip = '' } = Astro.props
|
|
---
|
|
<span class="spoiler" title={tip}>
|
|
<slot/>
|
|
</span>
|
|
<style>
|
|
:global(.spoiler p) {
|
|
background-color: #252525;
|
|
color: #252525;
|
|
transition: color 0.5s;
|
|
width: fit-content;
|
|
}
|
|
|
|
:global(.spoiler:hover p) {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.spoiler {
|
|
background-color: #252525;
|
|
color: #252525;
|
|
transition: color 0.5s;
|
|
width: fit-content;
|
|
}
|
|
|
|
.spoiler:hover {
|
|
color: #ffffff;
|
|
}
|
|
/* fix blockquotes */
|
|
.spoiler blockquote {
|
|
color: #252525;
|
|
transition: color 0.5s;
|
|
}
|
|
|
|
.spoiler blockquote:hover {
|
|
color: #ffffff;
|
|
}
|
|
/* fix code */
|
|
.spoiler code pre {
|
|
color: #252525;
|
|
transition: color 0.5s;
|
|
}
|
|
|
|
.spoiler code pre:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* fix list bullet*/
|
|
.spoiler li::marker {
|
|
color: #252525;
|
|
transition: color 0.5s;
|
|
}
|
|
|
|
.spoiler:hover li::marker {
|
|
color: #ffffff;
|
|
}
|
|
</style> |