@tencentcloud/chat-uikit-react 2.3.0 → 2.3.1

package/dist/esm/index.d.css

@@ -50,11 +50,11 @@
 }
 [data-uikit-theme=light] .tui-message-input-main .input-box textarea {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-message-input-main .input-box textarea {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
   border: none;
@@ -137,19 +137,21 @@ ul li {
 }
 [data-uikit-theme=light] .upload-picker {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .upload-picker {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .upload-picker:hover {
+  color: var(--uikit-theme-light-text-color-primary);
   background-color: var(--uikit-theme-light-dropdown-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .upload-picker:hover {
+  color: var(--uikit-theme-dark-text-color-primary);
   background-color: var(--uikit-theme-dark-dropdown-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .upload-picker input {
   position: absolute;
@@ -168,11 +170,11 @@ ul li {
 }
 [data-uikit-theme=light] .input-quote {
   background: var(--uikit-theme-light-bg-color-bubble-reciprocal);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .input-quote {
   background: var(--uikit-theme-dark-bg-color-bubble-reciprocal);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .input-quote-content {
   flex: 1;
@@ -213,11 +215,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-forward {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-forward {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-forward-header {
   display: flex;
@@ -226,11 +228,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-forward-header {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-forward-header {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-forward-title {
   padding: 0 16px;
@@ -250,11 +252,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-forward-main .no-result {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-forward-main .no-result {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-forward-search {
   padding: 10px 15px;
@@ -305,11 +307,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-forward-footer {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-forward-footer {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-forward-footer .button {
   cursor: pointer;
@@ -334,11 +336,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-forward-footer-name {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-forward-footer-name {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .transmitter {
@@ -350,29 +352,29 @@ ul li {
 
 [data-uikit-theme=light] .tui-message-input {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-message-input {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .tui-message-input .tui-kit-input-box--focus {
   outline: 1px solid var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-message-input .tui-kit-input-box--focus {
   outline: 1px solid var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .tui-message-input .input-box {
   background-color: var(--uikit-theme-light-bg-color-input);
   border: 1px solid var(--uikit-theme-light-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-message-input .input-box {
   background-color: var(--uikit-theme-dark-bg-color-input);
   border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .input-plugin-popup-box {
@@ -381,12 +383,12 @@ ul li {
 [data-uikit-theme=light] .input-plugin-popup-box {
   background-color: var(--uikit-theme-light-dropdown-color-default);
   box-shadow: 0 0 10px 0 var(--uikit-theme-light-shadow-color);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .input-plugin-popup-box {
   background-color: var(--uikit-theme-dark-dropdown-color-default);
   box-shadow: 0 0 10px 0 var(--uikit-theme-dark-shadow-color);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .input-icon {
@@ -395,11 +397,11 @@ ul li {
 }
 [data-uikit-theme=light] .input-icon {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .input-icon {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .message-default {
   width: 100%;
@@ -431,11 +433,11 @@ ul li {
 }
 [data-uikit-theme=light] .message-default .content .name {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-default .content .name {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .in {
@@ -495,19 +497,19 @@ ul li {
 }
 [data-uikit-theme=light] .message-status .time {
   color: var(--uikit-theme-light-text-color-anti-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-status .time {
   color: var(--uikit-theme-dark-text-color-anti-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .bubble-in .message-status .time {
   color: var(--uikit-theme-light-text-color-tertiary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .bubble-in .message-status .time {
   color: var(--uikit-theme-dark-text-color-tertiary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .message-image,
@@ -523,12 +525,12 @@ ul li {
 [data-uikit-theme=light] .message-image .message-status .time,
 [data-uikit-theme=light] .message-video .message-status .time {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-image .message-status .time,
 [data-uikit-theme=dark] .message-video .message-status .time {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .message-text {
@@ -668,11 +670,11 @@ ul li {
 }
 [data-uikit-theme=light] .meesage-bubble-reply {
   background-color: var(--uikit-theme-light-bg-color-bubble-own);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply {
   background-color: var(--uikit-theme-dark-bg-color-bubble-own);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .meesage-bubble-reply-in {
   border-radius: 16px 16px 16px 0;
@@ -696,11 +698,11 @@ ul li {
 }
 [data-uikit-theme=light] .meesage-bubble-reply-main {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply-main {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .meesage-bubble-reply-main::before {
   content: "";
@@ -711,10 +713,12 @@ ul li {
   left: 0;
 }
 [data-uikit-theme=light] .meesage-bubble-reply-main::before {
-  transition: background-color 0.3s ease-in-out;
+  background-color: var(--uikit-basic-color-bg-5);
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply-main::before {
-  transition: background-color 0.3s ease-in-out;
+  background-color: var(--uikit-basic-color-bg-5);
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .meesage-bubble-reply-main .title {
   font-weight: 500;
@@ -723,11 +727,11 @@ ul li {
 }
 [data-uikit-theme=light] .meesage-bubble-reply-main .title {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply-main .title {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .meesage-bubble-reply-main .message-context {
   opacity: 0.6;
@@ -857,27 +861,29 @@ ul li {
 }
 [data-uikit-theme=light] .message-plugin-item {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-plugin-item {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .message-plugin-item:hover {
   background: var(--uikit-theme-light-dropdown-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-plugin-item:hover {
   background: var(--uikit-theme-dark-dropdown-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .message-plugin-item .del {
   color: var(--uikit-theme-light-text-color-error);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-plugin-item .del {
   color: var(--uikit-theme-dark-text-color-error);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .message-custom {
@@ -983,34 +989,34 @@ ul li {
 
 [data-uikit-theme=light] .message-custom {
   border: 1px solid var(--uikit-theme-light-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-custom {
   border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 [data-uikit-theme=light] .bubble {
   background-color: var(--uikit-theme-light-bg-color-bubble-reciprocal);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .bubble {
   background-color: var(--uikit-theme-dark-bg-color-bubble-reciprocal);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .bubble-out {
   border: none;
   background-color: var(--uikit-theme-light-bg-color-bubble-own);
   color: var(--uikit-theme-light-text-color-anti-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .bubble-out {
   border: none;
   background-color: var(--uikit-theme-dark-bg-color-bubble-own);
   color: var(--uikit-theme-dark-text-color-anti-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
@@ -1019,11 +1025,11 @@ ul li {
 
 [data-uikit-theme=light] .message-tip {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-tip {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tip .bubble .edit {
@@ -1057,12 +1063,12 @@ ul li {
 [data-uikit-theme=light] .plugin-popup-box {
   background-color: var(--uikit-theme-light-dropdown-color-default);
   box-shadow: 0 0 10px 0 var(--uikit-theme-light-shadow-color);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .plugin-popup-box {
   background-color: var(--uikit-theme-dark-dropdown-color-default);
   box-shadow: 0 0 10px 0 var(--uikit-theme-dark-shadow-color);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-chat-header {
   padding: 16px 20px;
@@ -1073,11 +1079,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-chat-header {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-chat-header {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-chat-header-left {
   display: flex;
@@ -1101,11 +1107,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-chat-header .title {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-chat-header .title {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-chat-header .system {
   height: 32px;
@@ -1121,11 +1127,11 @@ ul li {
 }
 [data-uikit-theme=light] .chat {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .chat {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 ul,
 li,
@@ -1150,11 +1156,11 @@ ul li {
 }
 [data-uikit-theme=light] .message-list {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-list {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .message-list.hide {
   opacity: 0;
@@ -1173,11 +1179,11 @@ ul li {
 }
 [data-uikit-theme=light] .message-list .no-more {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-list .no-more {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .message-list-time {
   font-size: 12px;
@@ -1188,11 +1194,11 @@ ul li {
 }
 [data-uikit-theme=light] .message-list-time {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .message-list-time {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-chat-list__header {
   display: flex;
@@ -1205,12 +1211,12 @@ ul li {
 [data-uikit-theme=light] .uikit-chat-list__header {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-chat-list__header {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-chat-list__header .uikit-conversation-search + .uikit-conversation-create-container .uikit-conversation-create-button {
   margin-left: 0;
@@ -1235,36 +1241,36 @@ ul li {
 [data-uikit-theme=light] .uikit-chat-list__container {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-chat-list__container {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-kit-input-box {
   display: flex;
   align-items: center;
   border-radius: 10px;
   padding: 0 8px;
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
 }
 [data-uikit-theme=light] .tui-kit-input-box {
   background-color: var(--uikit-theme-light-bg-color-input);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-kit-input-box {
   background-color: var(--uikit-theme-dark-bg-color-input);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .tui-kit-input-box.tui-kit-input-box--focus {
   outline: 1px solid var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-kit-input-box.tui-kit-input-box--focus {
   outline: 1px solid var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-kit-input-box.tui-kit-input-border--bottom {
   outline: none;
@@ -1273,12 +1279,12 @@ ul li {
 [data-uikit-theme=light] .tui-kit-input-box.tui-kit-input-border--bottom {
   border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-kit-input-box.tui-kit-input-border--bottom {
   border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-kit-input-box .tui-kit-input {
   margin-left: 6px;
@@ -1295,11 +1301,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-kit-input-box .tui-kit-input {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-kit-input-box .tui-kit-input {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-kit-input-box .tui-kit-input:focus {
   border: none;
@@ -1310,11 +1316,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-kit-input-box .tui-kit-input::placeholder {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-kit-input-box .tui-kit-input::placeholder {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-search-input {
   height: 36px;
@@ -1325,12 +1331,12 @@ ul li {
 [data-uikit-theme=light] .uikit-conversation-search-input {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-search-input {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-kit-avatar {
   display: flex;
@@ -1412,19 +1418,19 @@ ul li {
 }
 [data-uikit-theme=light] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item:hover {
   background-color: var(--uikit-theme-light-dropdown-color-active);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item:hover {
   background-color: var(--uikit-theme-dark-dropdown-color-active);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item--delete {
   color: var(--uikit-theme-light-text-color-error);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item--delete {
   color: var(--uikit-theme-dark-text-color-error);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-actions .uikit-conversation-actions__popup-icon {
   transform: scale(1.5);
@@ -1444,58 +1450,58 @@ ul li {
 [data-uikit-theme=light] .uikit-conversation-preview {
   background-color: var(--uikit-theme-light-list-color-default);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview {
   background-color: var(--uikit-theme-dark-list-color-default);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .uikit-conversation-preview:hover {
   background-color: var(--uikit-theme-light-list-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview:hover {
   background-color: var(--uikit-theme-dark-list-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-preview.uikit-conversation-preview--mobile {
   padding: 0 10px;
 }
 [data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--pin {
   background-color: var(--uikit-theme-light-list-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--pin {
   background-color: var(--uikit-theme-dark-list-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--active {
   background-color: var(--uikit-theme-light-list-color-active);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--active {
   background-color: var(--uikit-theme-dark-list-color-active);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--active .uikit-conversation-preview__title {
   color: var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--active .uikit-conversation-preview__title {
   color: var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
   color: #fff;
 }
 [data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
   background-color: var(--uikit-theme-light-text-color-error);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
   background-color: var(--uikit-theme-dark-text-color-error);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-preview .uikit-conversation-preview__content {
   flex: 1 1 auto;
@@ -1513,27 +1519,27 @@ ul li {
 }
 [data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--normal {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--normal {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--highlight {
   color: var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--highlight {
   color: var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
   overflow: hidden;
@@ -1547,11 +1553,11 @@ ul li {
 }
 [data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-preview .uikit-conversation-preview__external {
   text-align: right;
@@ -1581,11 +1587,11 @@ ul li {
 }
 [data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-search-result {
   display: flex;
@@ -1598,12 +1604,12 @@ ul li {
 [data-uikit-theme=light] .uikit-conversation-search-result {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-search-result {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-search {
   display: flex;
@@ -1617,12 +1623,12 @@ ul li {
 [data-uikit-theme=light] .uikit-conversation-search {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-conversation-search {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-conversation-search.uikit-conversation-search--active {
   position: absolute;
@@ -1650,12 +1656,12 @@ ul li {
 [data-uikit-theme=light] .tui-conversation-create {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-create {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tui-conversation-create-header {
@@ -1667,11 +1673,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-conversation-create-header {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-create-header {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-conversation-create-header .title {
   margin-left: 10px;
@@ -1682,11 +1688,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-conversation-create-header .title {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-create-header .title {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tui-conversation-create-icon {
@@ -1708,11 +1714,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-user:hover {
   background-color: var(--uikit-theme-light-list-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-user:hover {
   background-color: var(--uikit-theme-dark-list-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-user .tui-user-name {
   margin-left: 10px;
@@ -1722,11 +1728,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-user .tui-user-name {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-user .tui-user-name {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-user .tui-user-name.active {
   font-weight: 600;
@@ -1734,11 +1740,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-user .tui-user-name.active {
   color: var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-user .tui-user-name.active {
   color: var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tui-user-checkbox-label .tui-user-checkbox {
@@ -1764,11 +1770,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-conversation-create-next-container .tui-conversation-create-next {
   background-color: var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-create-next-container .tui-conversation-create-next {
   background-color: var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tui-conversation-create-select-list-container {
@@ -1789,11 +1795,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .conversation-create-select-view {
   display: flex;
@@ -1803,11 +1809,11 @@ ul li {
 }
 [data-uikit-theme=light] .conversation-create-select-view {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .conversation-create-select-view {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .conversation-create-select-view .select-view-info {
   align-items: center;
@@ -1840,11 +1846,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-conversation-create-group-detail {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-create-group-detail {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-conversation-create-group-detail .create-group-box {
   padding: 10px 0;
@@ -1896,11 +1902,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-conversation-group-type-info {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-group-type-info {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-conversation-group-type-info .group-type-info-box {
   display: flex;
@@ -1913,12 +1919,12 @@ ul li {
 [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-box {
   background-color: var(--uikit-theme-light-bg-color-operate);
   border: 1px solid var(--uikit-theme-light-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-box {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-conversation-group-type-info .group-type-info-box:hover {
   border: 1px solid #147aff;
@@ -1946,11 +1952,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:link, [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:active, [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:visited {
   color: var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:link, [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:active, [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:visited {
   color: var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-conversation-create-button {
   display: flex;
@@ -1970,12 +1976,12 @@ ul li {
 [data-uikit-theme=light] .uikit-chat-list {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .uikit-chat-list {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .uikit-chat-list .uikit-chat-list__header--searching {
   position: absolute;
@@ -1995,11 +2001,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-profile {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-profile {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-profile-header {
   box-sizing: border-box;
@@ -2045,11 +2051,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-profile-ID {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-profile-ID {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-profile-ID h5 {
   margin: 0;
@@ -2075,11 +2081,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-profile-div-with-edit {
   border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-profile-div-with-edit {
   border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-profile-edit {
   border-bottom: none !important;
@@ -2101,11 +2107,11 @@ ul li {
 
 [data-uikit-theme=light] .tui-profile {
   background: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-profile {
   background: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-manage {
   display: flex;
@@ -2118,13 +2124,13 @@ ul li {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
   border-left: 1px solid var(--uikit-theme-light-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-manage {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
   border-left: 1px solid var(--uikit-theme-dark-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-manage .red {
   color: #ff584c !important;
@@ -2161,11 +2167,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-info .info-id {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-info .info-id {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
   display: flex;
@@ -2175,11 +2181,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
   background: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
   background: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box:nth-child(2) {
   margin-top: 10px;
@@ -2190,11 +2196,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tui-manage.tui-h5-manage {
@@ -2211,11 +2217,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-manage.tui-h5-manage {
   background: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-manage.tui-h5-manage {
   background: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .popup {
   opacity: 0;
@@ -2252,34 +2258,34 @@ ul li {
 [data-uikit-theme=light] .info {
   background-color: var(--uikit-theme-light-bg-color-operate);
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .info {
   background-color: var(--uikit-theme-dark-bg-color-operate);
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 [data-uikit-theme=light] .warn {
   background-color: var(--uikit-theme-light-text-color-warning);
   color: #fff;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .warn {
   background-color: var(--uikit-theme-dark-text-color-warning);
   color: #fff;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 [data-uikit-theme=light] .error {
   background-color: var(--uikit-theme-light-text-color-error);
   color: #fff;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .error {
   background-color: var(--uikit-theme-dark-text-color-error);
   color: #fff;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .div-with-edit {
   flex: 1;
@@ -2321,11 +2327,11 @@ ul li {
 }
 [data-uikit-theme=light] .div-with-edit .edit {
   border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .div-with-edit .edit {
   border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .div-with-edit .edit input {
   flex: 1;
@@ -2347,23 +2353,23 @@ ul li {
 [data-uikit-theme=light] .div-with-edit .edit .select {
   background: var(--uikit-theme-light-dropdown-color-default);
   box-shadow: 0 11px 20px 0 var(--uikit-theme-light-shadow-color);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .div-with-edit .edit .select {
   background: var(--uikit-theme-dark-dropdown-color-default);
   box-shadow: 0 11px 20px 0 var(--uikit-theme-dark-shadow-color);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .div-with-edit .edit .select-list-item {
   padding: 7px 10px;
 }
 [data-uikit-theme=light] .div-with-edit .edit .select-list-item:hover {
   background: var(--uikit-theme-light-dropdown-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .div-with-edit .edit .select-list-item:hover {
   background: var(--uikit-theme-dark-dropdown-color-hover);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-kit-icon {
   display: flex;
@@ -2403,22 +2409,22 @@ ul li {
 [data-uikit-theme=light] .tui-kit-icon-loading {
   border: 3px solid var(--uikit-theme-light-text-color-disable);
   border-top-color: transparent;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-kit-icon-loading {
   border: 3px solid var(--uikit-theme-dark-text-color-disable);
   border-top-color: transparent;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .tui-kit-icon-loading:hover {
   border: 3px solid var(--uikit-theme-light-text-color-disable);
   border-top-color: transparent;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-kit-icon-loading:hover {
   border: 3px solid var(--uikit-theme-dark-text-color-disable);
   border-top-color: transparent;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 @keyframes circle {
@@ -2548,11 +2554,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contacts-list {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contacts-list {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contacts-list .tui-contacts-title {
   display: flex;
@@ -2574,11 +2580,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contacts-list .tui-contacts-list-item {
   align-items: center;
@@ -2650,11 +2656,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contact-info {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contact-info {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contact-info .tui-contact-info-header {
   padding-bottom: 15px;
@@ -2677,11 +2683,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contact-info .tui-contact-info-header .header-container .header-container-name {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contact-info .tui-contact-info-header .header-container .header-container-name {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
   margin-top: 20px;
@@ -2690,11 +2696,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contact-info .tui-contact-info-content {
   padding: 15px 0;
@@ -2702,11 +2708,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contact-info .tui-contact-info-content {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contact-info .tui-contact-info-content .content-item {
   display: flex;
@@ -2761,23 +2767,23 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
   color: var(--uikit-theme-light-text-color-error);
-  border: 1px solid;
-  transition: background-color 0.3s ease-in-out;
+  border: 1px solid var(--uikit-basic-color-border-color-error);
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
   color: var(--uikit-theme-dark-text-color-error);
-  border: 1px solid;
-  transition: background-color 0.3s ease-in-out;
+  border: 1px solid var(--uikit-basic-color-border-color-error);
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=light] .tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
   color: #fff;
   background-color: var(--uikit-theme-light-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
   color: #fff;
   background-color: var(--uikit-theme-dark-text-color-link);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tui-contact-info-h5 {
@@ -2795,11 +2801,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contacts {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contacts {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contacts .tui-contacts-header {
   position: relative;
@@ -2833,11 +2839,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contacts .tui-contacts-add-header {
   background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contacts .tui-contacts-add-header {
   background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
   font-size: 20px;
@@ -2846,11 +2852,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
   color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
   color: var(--uikit-theme-dark-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 .tui-contacts .no-result {
   padding: 0 20px;
@@ -2867,11 +2873,11 @@ ul li {
 }
 [data-uikit-theme=light] .tui-contacts .no-result-message {
   color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 [data-uikit-theme=dark] .tui-contacts .no-result-message {
   color: var(--uikit-theme-dark-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
 }
 
 .tui-contacts-h5 {