Added support for search highlighting fading

This commit is contained in:
squidfunk 2022-01-08 08:56:06 +01:00
parent 5bc7240319
commit 07f7366875
6 changed files with 28 additions and 11 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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 %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.bb3983ee.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.a4a84060.min.css' | url }}">
{% if config.theme.palette %} {% if config.theme.palette %}
{% set palette = config.theme.palette %} {% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">

View File

@ -20,6 +20,17 @@
/// DEALINGS /// DEALINGS
//// ////
// ----------------------------------------------------------------------------
// Keyframes
// ----------------------------------------------------------------------------
// Fade text highlighting marker
@keyframes fade {
100% {
background-color: transparent;
}
}
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Rules: font definitions // Rules: font definitions
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -277,6 +288,12 @@ kbd {
word-break: break-word; word-break: break-word;
background-color: var(--md-typeset-mark-color); background-color: var(--md-typeset-mark-color);
box-decoration-break: clone; box-decoration-break: clone;
// Automatically fade programatically inserted markers - only active if the
// variable is defined by the author - see https://bit.ly/3r1C6qm
&[data-md-highlight] {
animation: fade var(--md-highlight-fade) forwards;
}
} }
// Abbreviation // Abbreviation