diff --git a/public/script.js b/public/script.js index 3fd5ca030..bb054bb32 100644 --- a/public/script.js +++ b/public/script.js @@ -4104,6 +4104,21 @@ function select_rm_info(type, charId) { } selectRightMenuWithAnimation('rm_characters_block'); + + if (type === 'char_import' || type === 'char_create') { + + //$(`#rm_characters_block [title="${charId + '.png'}"]`).scrollIntoView({ behavior: "smooth", block: "end" }); + const element = $(`#rm_characters_block [title="${charId + '.png'}"]`).get(0); + element.scrollIntoView({ behavior: 'smooth', block: 'end' }); + + /* $(`#rm_characters_block [title="${charId + '.png'}"]`).parent.addClass('flash animated'); + setTimeout(function(){ + $(`#rm_characters_block [title="${charId + '.png'}"]`).parent.addClass('flash animated'); + }, 1000); */ + + } + + setRightTabSelectedClass(); prev_selected_char = charId; diff --git a/public/style.css b/public/style.css index d11d07aa9..1a1728ffa 100644 --- a/public/style.css +++ b/public/style.css @@ -132,6 +132,31 @@ table.responsiveTable { border-top: 2px solid grey; } +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@keyframes flash { + + 0%, + 50%, + 100% { + opacity: 1; + } + + 25%, + 75% { + opacity: 0; + } +} + +.flash { + animation-name: flash; +} + .tokenItemizingSubclass { font-size: calc(var(--mainFontSize) * 0.8); color: var(--SmartThemeEmColor); @@ -578,6 +603,7 @@ code { margin-top: 0; width: 100%; color: var(--SmartThemeBodyColor); + position: relative; } .mes q:before,