mirrors/DiscordChatExporter
1
0
Fork 0
mirror of https://github.com/Tyrrrz/DiscordChatExporter.git synced 2025-05-31 06:48:23 -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 { body {
background-color: #36393e; background-color: #36393e;
@ -54,6 +54,10 @@ a {
color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2);
} }
.chatlog__message--highlighted {
background-color: rgba(114, 137, 218, 0.2);
}
.chatlog__message--pinned { .chatlog__message--pinned {
background-color: rgba(249, 168, 37, 0.05); background-color: rgba(249, 168, 37, 0.05);
} }

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

@ -1,4 +1,4 @@
/* === GENERAL === */ /* === GENERAL === */
body { body {
background-color: #ffffff; background-color: #ffffff;
@ -57,6 +57,10 @@ a {
color: #747f8d; color: #747f8d;
} }
.chatlog__message--highlighted {
background-color: rgba(114, 137, 218, 0.2);
}
.chatlog__message--pinned { .chatlog__message--pinned {
background-color: rgba(249, 168, 37, 0.05); 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; padding: 2px 5px;
margin-right: -5px; margin-right: -5px;
margin-left: -5px; margin-left: -5px;
background-color: transparent;
transition: background-color 1s ease;
} }
.chatlog__content { .chatlog__content {

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

@ -22,9 +22,17 @@
if (element !== null && element !== undefined) { if (element !== null && element !== undefined) {
event.preventDefault(); 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' behavior: 'smooth'
}); });
window.setTimeout(function() {
element.classList.remove('chatlog__message--highlighted');
}, 2000);
} }
} }
</script> </script>