Fixed minor z-index issues for code annotations

This commit is contained in:
squidfunk 2021-11-21 23:35:41 +01:00
parent e44034d456
commit 1bd7f9d665
6 changed files with 13 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -34,7 +34,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.e03ee9c3.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.6378942d.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">

View File

@ -94,7 +94,6 @@
// Tab label
> label {
z-index: 1;
flex-shrink: 0;
width: auto;
padding: px2em(10px, 12.8px) 1.25em px2em(8px, 12.8px);

View File

@ -60,6 +60,9 @@
calc(var(--md-tooltip-x) - #{px2rem(16px)}),
calc(100vw - var(--md-tooltip-width) - #{px2rem(16px)})
);
// Hack: set an explicit `z-index` so we can transition it to ensure that any
// following elements are not overlaying the tooltip during the transition.
z-index: 0;
width: var(--md-tooltip-width);
max-width: calc(100vw - 2 * #{px2rem(16px)});
max-height: 0;
@ -74,7 +77,8 @@
transition:
transform 0ms 250ms,
opacity 250ms,
max-height 0ms 250ms;
max-height 0ms 250ms,
z-index 250ms;
// [reduced-motion]: Disable animation
@media (prefers-reduced-motion) {
@ -89,7 +93,8 @@
transition:
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 250ms,
max-height 250ms;
max-height 250ms,
z-index 0ms;
// [reduced-motion]: Disable animation
@media (prefers-reduced-motion) {
@ -175,6 +180,7 @@
margin: 0 1ch;
color: hsla(0, 0%, 100%, 1);
cursor: pointer;
transition: z-index 250ms;
user-select: none;
// Code annotation index bubble the bubble must be positioned absolutely
@ -230,6 +236,7 @@
// Code annotation index on focus
:focus-within > & {
transition: none;
animation: none;
}
}