Add glossary hover presentation
This commit is contained in:
@@ -1467,6 +1467,23 @@ html[data-process-state="playing-ready"] [role="button"] {
|
||||
font-feature-settings: "kern" on, "liga" on, "onum" on, "pnum" on, "dlig" on, "clig" on, "calt" on;
|
||||
}
|
||||
|
||||
.story-glossary-word {
|
||||
border-bottom: none;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-color: rgba(74, 54, 33, 0.62);
|
||||
text-decoration-thickness: 0.035em;
|
||||
text-underline-offset: 0.12em;
|
||||
cursor: var(--pointer-cursor, help);
|
||||
}
|
||||
|
||||
.story-glossary-word:hover,
|
||||
.story-glossary-word:focus-visible {
|
||||
color: var(--ink-strong);
|
||||
clip-path: none !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@keyframes wordReveal {
|
||||
0% {
|
||||
opacity: 1;
|
||||
@@ -1478,6 +1495,48 @@ html[data-process-state="playing-ready"] [role="button"] {
|
||||
}
|
||||
}
|
||||
|
||||
.story-glossary-tooltip {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 240;
|
||||
width: min(calc(var(--book-width) * 0.22), 28rem);
|
||||
max-width: calc(100vw - 2rem);
|
||||
background: var(--panel-paper);
|
||||
color: var(--ink-text);
|
||||
border: 1px solid var(--panel-border);
|
||||
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.34);
|
||||
font-family: 'EB Garamond', var(--book-font), serif;
|
||||
font-size: var(--ui-modal-font-size);
|
||||
line-height: 1.25;
|
||||
opacity: 0;
|
||||
transform: translateY(0.22rem);
|
||||
pointer-events: none;
|
||||
transition: opacity 140ms ease, transform 140ms ease;
|
||||
}
|
||||
|
||||
.story-glossary-tooltip.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.story-glossary-tooltip-header {
|
||||
border-bottom: 1px solid var(--rule-brown);
|
||||
padding: calc(var(--story-line-height) * 0.35) calc(var(--story-line-height) * 0.55) calc(var(--story-line-height) * 0.24);
|
||||
}
|
||||
|
||||
.story-glossary-tooltip-title {
|
||||
margin: 0;
|
||||
color: var(--ink-strong);
|
||||
font: inherit;
|
||||
font-style: italic;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.story-glossary-tooltip-body {
|
||||
padding: calc(var(--story-line-height) * 0.38) calc(var(--story-line-height) * 0.55) calc(var(--story-line-height) * 0.48);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
font-synthesis: none;
|
||||
|
||||
Reference in New Issue
Block a user