better hints

This commit is contained in:
Joshua Seigler 2024-04-07 15:45:38 -04:00
parent 72cf355b57
commit df6c850b3f

View file

@ -153,7 +153,7 @@ h1 {
.dualtext-help > span {
position: relative;
min-width: 0;
transition: all 0.25s ease-in;
transition: opacity 0.25s ease-in;
}
.dualtext-help > span::before {
content: attr(data-character);
@ -164,10 +164,12 @@ h1 {
content: attr(data-character);
pointer-events: none;
position: absolute;
left: 0;
right: 0;
top: 70%;
left: 50%;
transform: translateX(-50%);
margin: auto;
padding: 0.1em 0.25em;
min-width: 100%;
font-family: var(--font-standard);
font-size: clamp(0.75rem, 0.25em, 1rem);
font-weight: 400;
@ -201,7 +203,7 @@ main {
display: flex;
flex-direction: column;
overflow: scroll;
padding-block: 1em;
padding: 1em;
}
.readingbox .dualtext-help {
@ -214,8 +216,7 @@ main {
.readingbox .dualtext-help > span::after {
top: auto;
bottom: 70%;
padding: 0 0.2em 0.5em;
margin: 0 -0.2em 0;
padding-bottom: 0.5em;
font-size: 1em;
background-image: linear-gradient(
to top,
@ -226,7 +227,9 @@ main {
border-width: 0;
border-radius: 0.5em 0.5em 0 0;
line-height: 1;
text-align: center;
}
.readingbox .dualtext-help > span:hover {
opacity: 1;
outline: 1px solid var(--color-accent2);
}