Ticket #4446 - Timeline: Text overflow gradient doesn't match the background.

modules/boonex/artificer/data/template/bx_timeline/css/view.css

@@ -89,13 +89,11 @@ div.bx-tl-item-text div.bx-tl-content {
 div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow {
     margin-bottom: 0;
 }
-div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow:before {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 20%;
-
-    content: '';
+div.bx-tl-item-text div.bx-tl-content .bx-tl-content-overflow {
+    display: none;
+}
+div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
+    display: block;
 }
 
 /*--- Item Activity (Actions and Manage are different menus) ---*/

modules/boonex/artificer/data/template/bx_timeline/item_outline.html

@@ -1,7 +1,7 @@
 <div id="__html_id__" class="__style_prefix__-item __class__">
     <a name="timeline-event-__id__"></a>
     <div class="__style_prefix__-item-ind p-2">
-        <div class="__style_prefix__-item-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box __class_content__">
+        <div class="__style_prefix__-item-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box __class_content__ group/item hover:bg-gray-50 dark:hover:bg-gray-900 hover:shadow-lg transition-transform hover:-translate-y-1 duration-300">
             <div class="__style_prefix__-blink-plate"></div>
             <bx_if:show_note>
                 <div class="__style_prefix__-item-notes mt-3 md:mt-4">

modules/boonex/artificer/data/template/bx_timeline/item_timeline.html

@@ -1,6 +1,6 @@
 <div id="__html_id__" class="__style_prefix__-item __class__ bx-def-thumb-size-min-height relative pb-3 md:pb-4 lg:pb-6 bx-clearfix ">
     <a name="timeline-event-__id__"></a>
-    <div class="__style_prefix__-item-cnt bx-lnk-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box __class_content__ hover:bg-gray-50 dark:hover:bg-gray-700/20 hover:shadow-lg hover:-translate-y-1 duration-300">
+    <div class="__style_prefix__-item-cnt bx-lnk-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box __class_content__ group/item hover:bg-gray-50 dark:hover:bg-gray-900 hover:shadow-lg transition-transform hover:-translate-y-1 duration-300">
         <div class="__style_prefix__-blink-plate"></div>
         <bx_if:show_note>
             <div class="__style_prefix__-item-notes mt-3 md:mt-4">

modules/boonex/ocean/data/template/bx_timeline/css/view.less

@@ -2,7 +2,7 @@
 @import (reference) '../../system/css/default.less';
 @import '../../../../../timeline/template/css/view.css';
 
-div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow:before {
+div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
     background: -webkit-linear-gradient(top, transparent, @bx-color-box);
     background: -moz-linear-gradient(top, transparent, @bx-color-box);
     background: -o-linear-gradient(top, transparent, @bx-color-box);

modules/boonex/protean/data/template/bx_timeline/css/view.less

@@ -2,7 +2,7 @@
 @import '../../../../../timeline/template/css/view.css';
 
 /*--- Item Content Style ---*/
-div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow:before {
+div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
     background: -webkit-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
     background: -moz-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
     background: -o-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);

modules/boonex/timeline/template/css/view.css

@@ -471,18 +471,11 @@ div.bx-tl-item-text div.bx-tl-content > p:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
 }
-div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow:before {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 20%;
-
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
-    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
-    background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
-
-    content: '';
+div.bx-tl-item-text div.bx-tl-content .bx-tl-content-overflow {
+    display: none;
+}
+div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
+    display: block;
 }
 div.bx-tl-item-text div.bx-tl-content-show-more {
     position: relative;

modules/boonex/timeline/template/type_post.html

@@ -27,7 +27,10 @@
         <div class="__style_prefix__-title mb-2 md:mb-4 text-lg lg:text-xl font-semibold text-gray-700 dark:text-gray-300">__title__</div>
     </bx_if:show_title>
     <bx_if:show_content>
-        <div class="__style_prefix__-content bx-overflow-ready bx-def-vanilla-html bx-def-vh-sm relative max-w-none">__item_content__</div>
+        <div class="__style_prefix__-content bx-overflow-ready bx-def-vanilla-html bx-def-vh-sm relative max-w-none">
+            __item_content__
+            <div class="__style_prefix__-content-overflow bx-def-color-bg-box-overflow absolute bottom-0 w-full h-1/5"></div>
+        </div>
     </bx_if:show_content>
 </div>
 <bx_if:show_attachments>

plugins_public/tailwind/css/tailwind.css

@@ -602,6 +602,9 @@
     .bx-popup-color-bg {
         @apply bg-white dark:bg-gray-800 shadow-md;
     }
+    .bx-def-color-bg-box-overflow {
+        @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
+    }
     .bx-def-border-block,
     .bx-def-box,
     .bx-popup-border {
@@ -1214,10 +1217,13 @@
         @apply text-gray-300 dark:text-gray-700;
     }
 
-    
+
     /* Modules: Timeline */
-    .bx-artificer .bx-tl-item-text .bx-tl-content.bx-tl-overflow:before {
-        @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
+    .bx-artificer .group\/item:hover .bx-tl-item-text .bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
+        @apply to-gray-50;
+    }
+    .dark .bx-artificer .group\/item:hover .bx-tl-item-text .bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
+        @apply to-gray-900;
     }
     .bx-artificer .bx-tl-item-activity .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a,
     .bx-artificer .bx-menu-object-bx_timeline_menu_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a {