riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

make the 🔗 button copy branch links to clipboard

Browse source 
to accomplish this, I generalised emoji tooltips to a shared Tooltip class.
in the long run I'd like to transform all existing `title=""` tooltips into these for stylistic consistency with the rest of the website, but this is good enough for now.

I also ended up cleaning up some old code from before the /b rework.
This commit is contained in:
りき萌 2025-01-11 00:15:29 +01:00
parent c537eb844f
commit 74baa61122
8 changed files with 208 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

73
static/css/main.css
View file

@ -611,21 +611,26 @@ img[data-cast~="emoji"] {
object-fit: contain;
}
/* And also style emoji tooltips. */
/* Tooltips */
th-emoji-tooltip {
display: flex;
flex-direction: column;
align-items: center;
th-overlays {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
th-tooltip {
display: block;
position: fixed;
transform: translateX(-50%) translateY(-10%) scale(0.8);
width: max-content;
z-index: 100;
background-color: var(--background-color-tooltip);
padding: 0.8rem;
margin-top: 0.8rem;
padding: 0.4rem 0.8rem;
border-radius: 0.6rem;
transition:
@ -635,27 +640,51 @@ th-emoji-tooltip {
opacity: 0%;
filter: blur(0.3rem);
pointer-events: none;
font-size: 0.9em;
&[th-side="bottom"] {
transform: translateX(-50%) translateY(-10%) scale(0.8);
&.transitioned-in {
transform: translateX(-50%) scale(1);
}
}
&[th-side="left"] {
transform: translateX(-90%) translateY(-50%) scale(0.8);
&.transitioned-in {
transform: translateX(-100%) translateY(-50%);
}
}
}
th-emoji-tooltip.transitioned-in {
th-tooltip.transitioned-in {
opacity: 100%;
filter: blur(0);
transform: translateX(-50%) scale(1);
}
th-emoji-tooltip img {
display: block;
max-width: 7.2rem;
max-height: 7.2rem;
}
th-tooltip.tooltip-emoji {
display: flex;
flex-direction: column;
align-items: center;
th-emoji-tooltip p {
--recursive-wght: 550;
color: var(--text-color);
font-size: 0.9em;
margin: 0;
padding-top: 0.6rem;
line-height: 1;
padding: 0.8rem;
margin-top: 0.8rem;
& > img {
display: block;
max-width: 7.2rem;
max-height: 7.2rem;
}
& > p {
color: var(--text-color);
margin: 0;
padding-top: 0.6rem;
line-height: 1;
}
}
.th-emoji-unknown {