L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-87689 theme: Add temporary visual highlight to anchor links

Browse Source
This commit is contained in:
Sara Arjona
2026-01-20 07:30:06 +01:00
parent 19c8567f01
commit a22c128504
3 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/theme/boost/scss/moodle/course.scss
+28
View File
@@ -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;
}
}
public/theme/boost/style/moodle.css
+23
View File
@@ -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.
*/
public/theme/classic/style/moodle.css
+23
View File
@@ -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.
*/