tooltips now fully styled, appearing above applet container to avoid clipping issues; new methods added to apps.lyric.models.Token

This commit is contained in:
Disco DeDisco
2026-03-09 23:48:20 -04:00
parent 645b265c80
commit d2861077a4
7 changed files with 143 additions and 64 deletions

View File

@@ -1,3 +1,38 @@
.token-tooltip {
display: none;
width: 16rem;
max-width: 16rem;
white-space: normal;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
border: 0.1rem solid rgba(var(--secUser), 0.5);
color: rgba(var(--secUser), 1);
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
z-index: 10;
font-size: 0.875rem;
h4 {
font-size: 0.95rem;
margin: 0 0 0.3rem 0;
color: rgba(var(--terUser), 1);
}
p {
margin: 0 0 0.2rem 0;
&.expiry {
color: rgba(var(--priRd), 1);
}
}
small {
display: block;
font-size: 0.6rem;
opacity: 0.6;
}
}
.token {
position: relative;
display: inline-block;
@@ -5,23 +40,13 @@
color: rgba(var(--terUser), 1);
.token-tooltip {
display: none;
position: absolute;
bottom: 125%;
left: 0;
width: 16rem;
max-width: 16rem;
white-space: normal;
background-color: rgba(var(--priUser), 0.95);
border: 0.1rem solid rgba(var(--secUser), 0.5);
color: rgba(var(--secUser), 1);
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
z-index: 10;
font-size: 0.875rem;
left: 50%;
transform: translateX(-50%);
}
&:hover .token-tooltip {
display: block;
}
}
}