diff --git a/public/theme/boost/scss/moodle/course.scss b/public/theme/boost/scss/moodle/course.scss index 65f99eaff5d..7bc1a9bac34 100644 --- a/public/theme/boost/scss/moodle/course.scss +++ b/public/theme/boost/scss/moodle/course.scss @@ -935,3 +935,31 @@ $divider-hover-color: $primary !default; width: (16 * $mod-indent-size); } } + +/* Temporary visual highlight for anchors. */ +$highlight-style: highlight-fade 2s ease-in-out; + +[id^="section-"]:target { + animation: $highlight-style; +} +[id^="module-"]:target { + body:not(.editing) &, + body.editing & .activity-item { + animation: $highlight-style; + } +} + +@keyframes highlight-fade { + 0% { + @include border-radius($activity-border-radius); + outline: $activity-border-width solid $activity-hover-border-color; + } + 70% { + @include border-radius($activity-border-radius); + outline: $activity-border-width solid $activity-hover-border-color; + } + 100% { + @include border-radius($activity-border-radius); + outline: $activity-border-width solid transparent; + } +} diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css index 347ed1d06d9..1f9411624f8 100644 --- a/public/theme/boost/style/moodle.css +++ b/public/theme/boost/style/moodle.css @@ -31260,6 +31260,29 @@ table.calendartable caption { width: 480px; } } +/* Temporary visual highlight for anchors. */ +[id^=section-]:target { + animation: highlight-fade 2s ease-in-out; +} + +body:not(.editing) [id^=module-]:target, body.editing [id^=module-]:target .activity-item { + animation: highlight-fade 2s ease-in-out; +} + +@keyframes highlight-fade { + 0% { + border-radius: 1rem; + outline: 2px solid #0f6cbf; + } + 70% { + border-radius: 1rem; + outline: 2px solid #0f6cbf; + } + 100% { + border-radius: 1rem; + outline: 2px solid transparent; + } +} /* * Course management page styles. */ diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css index 5ada445b880..7dcda45f167 100644 --- a/public/theme/classic/style/moodle.css +++ b/public/theme/classic/style/moodle.css @@ -31260,6 +31260,29 @@ table.calendartable caption { width: 480px; } } +/* Temporary visual highlight for anchors. */ +[id^=section-]:target { + animation: highlight-fade 2s ease-in-out; +} + +body:not(.editing) [id^=module-]:target, body.editing [id^=module-]:target .activity-item { + animation: highlight-fade 2s ease-in-out; +} + +@keyframes highlight-fade { + 0% { + border-radius: 1rem; + outline: 2px solid #0f6cbf; + } + 70% { + border-radius: 1rem; + outline: 2px solid #0f6cbf; + } + 100% { + border-radius: 1rem; + outline: 2px solid transparent; + } +} /* * Course management page styles. */