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