mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-10-12 15:04:04 +00:00
82 lines
2.4 KiB
CSS
82 lines
2.4 KiB
CSS
/* the panel of js/directives/inViewTooltip.js. place() sets its place, max width and max height
|
|
inside the viewport, so neither a scrolling container nor a modal body clips it */
|
|
.fhc-in-view-tooltip {
|
|
--fhc-in-view-tooltip-progress: var(--fhc-blue-primary, #0d6efd);
|
|
position: fixed;
|
|
z-index: 1080;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: max-content;
|
|
border: 1px solid var(--bs-border-color, #dee2e6);
|
|
border-radius: 0.375rem;
|
|
background-color: var(--bs-body-bg, #fff);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
color: var(--bs-body-color, #212529);
|
|
font-size: 0.875rem;
|
|
font-weight: normal;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
}
|
|
|
|
/* the dark primary reaches 2:1 on the dark panel, the highlight 3.9:1 */
|
|
html.dark .fhc-in-view-tooltip {
|
|
--fhc-in-view-tooltip-progress: var(--fhc-blue-primary-highlight, #6ea8fe);
|
|
}
|
|
|
|
/* the body scrolls, so the progress border stays on the panel edge */
|
|
.fhc-in-view-tooltip-body {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 0.75rem 1rem;
|
|
white-space: pre-line; /* the text keeps its line breaks */
|
|
}
|
|
|
|
/* the hover timer of a sticky panel: after a pause the border fills up clockwise, then the panel sticks.
|
|
The 2 px stroke covers the 1 px border and 1 px inside it */
|
|
.fhc-in-view-tooltip-progress {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.fhc-in-view-tooltip-progress rect {
|
|
fill: none;
|
|
stroke: var(--fhc-in-view-tooltip-progress);
|
|
stroke-width: 2;
|
|
stroke-dasharray: var(--fhc-in-view-tooltip-perimeter);
|
|
stroke-dashoffset: var(--fhc-in-view-tooltip-perimeter);
|
|
}
|
|
|
|
.fhc-in-view-tooltip--holding .fhc-in-view-tooltip-progress rect {
|
|
animation: fhc-in-view-tooltip-hold var(--fhc-in-view-tooltip-hold-fill) ease-in var(--fhc-in-view-tooltip-hold-delay) forwards;
|
|
}
|
|
|
|
/* a click during the hover timer fills the rest of the border quickly */
|
|
.fhc-in-view-tooltip--pinned .fhc-in-view-tooltip-progress rect {
|
|
stroke-dashoffset: 0;
|
|
transition: stroke-dashoffset 0.15s linear;
|
|
}
|
|
|
|
@keyframes fhc-in-view-tooltip-hold {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
/* the ? icon of components/InViewHelp.js takes the color of its context, e.g. white in the blue
|
|
modal header. A class like text-muted overrides it */
|
|
.fhc-in-view-help-btn,
|
|
.fhc-in-view-help-btn:hover,
|
|
.fhc-in-view-help-btn:focus-visible,
|
|
.btn.fhc-in-view-help-btn:active {
|
|
color: inherit;
|
|
}
|
|
|
|
.fhc-in-view-help-btn {
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
}
|