mirrors/DiscordChatExporter
1
0
Fork 0
mirror of https://github.com/Tyrrrz/DiscordChatExporter.git synced 2025-05-29 05:55:21 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[HTML] Add smooth highlight transition when navigating to message via link

Browse source
This commit is contained in:
Alexey Golub 2019-09-14 23:35:49 +03:00
parent a2beb9836b
commit 82af36c90d
4 changed files with 21 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
View file

@ -1,4 +1,4 @@
/* === GENERAL === */
/* === GENERAL === */
body {
background-color: #36393e;
@ -54,6 +54,10 @@ a {
color: rgba(255, 255, 255, 0.2);
}
.chatlog__message--highlighted {
background-color: rgba(114, 137, 218, 0.2);
}
.chatlog__message--pinned {
background-color: rgba(249, 168, 37, 0.05);
}

6
DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
View file

@ -1,4 +1,4 @@
/* === GENERAL === */
/* === GENERAL === */
body {
background-color: #ffffff;
@ -57,6 +57,10 @@ a {
color: #747f8d;
}
.chatlog__message--highlighted {
background-color: rgba(114, 137, 218, 0.2);
}
.chatlog__message--pinned {
background-color: rgba(249, 168, 37, 0.05);
}

2
DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css
View file

@ -183,6 +183,8 @@ img {
padding: 2px 5px;
margin-right: -5px;
margin-left: -5px;
background-color: transparent;
transition: background-color 1s ease;
}
.chatlog__content {

10
DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
View file

@ -22,9 +22,17 @@
if (element !== null && element !== undefined) {
event.preventDefault();
element.scrollIntoView({
element.classList.add('chatlog__message--highlighted');
window.scrollTo({
top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - (window.innerHeight / 2),
behavior: 'smooth'
});
window.setTimeout(function() {
element.classList.remove('chatlog__message--highlighted');
}, 2000);
}
}
</script>