Updated the style of Timeline to match the rest of the template

build/less/timeline.less

@@ -9,18 +9,17 @@
   padding: 0;
   list-style: none;
 
-  // The line 
+  // The line
   &:before {
     content: '';
     position: absolute;
     top: 0px;
     bottom: 0;
-    width: 5px;
+    width: 4px;
     background: #ddd;
-    left: 30px;
-    border: 1px solid #eee;
+    left: 31px;
     margin: 0;
-    .border-radius(2px);        
+    .border-radius(2px);
   }
 
 
@@ -30,29 +29,30 @@
     margin-bottom: 15px;
     .clearfix();
 
-    // The content 
+    // The content
     > .timeline-item {
-      margin-top: 10px;
-      border: 0px solid #dfdfdf;
+      .box-shadow(@box-boxshadow);
+      .border-radius(@box-border-radius);
+      margin-top: 0px;
       background: #fff;
-      color: #555;
+      color: #444;
       margin-left: 60px;
       margin-right: 15px;
-      padding: 5px;
+      padding: 0;
       position: relative;
-      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);            
 
-      // The time and header 
+      // The time and header
       > .time {
         color: #999;
         float: right;
-        margin: 2px 0 0 0;
+        padding: 10px;
+        font-size: 12px;
       }
       > .timeline-header {
         margin: 0;
         color: #555;
-        border-bottom: 1px solid #f4f4f4;
-        padding: 5px;
+        border-bottom: 1px solid @box-border-color;
+        padding: 10px;
         font-size: 16px;
         line-height: 1.1;
         > a {
@@ -66,35 +66,33 @@
 
     }
 
-    // Time label 
+    // Time label
     &.time-label {
       > span {
         font-weight: 600;
         padding: 5px;
         display: inline-block;
         background-color: #fff;
-        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+        
         .border-radius(4px);
       }
     }
 
-    // The icons 
+    // The icons
     > .fa,
     > .glyphicon,
     > .ion {
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       width: 30px;
       height: 30px;
       font-size: 15px;
       line-height: 30px;
       position: absolute;
       color: #666;
-      background: #eee;
+      background: @gray;
       border-radius: 50%;
       text-align: center;
       left: 18px;
       top: 0;
     }
-
   }
 }

dist/css/AdminLTE.css

@@ -1662,10 +1662,9 @@ a:focus {
   position: absolute;
   top: 0px;
   bottom: 0;
-  width: 5px;
+  width: 4px;
   background: #ddd;
-  left: 30px;
-  border: 1px solid #eee;
+  left: 31px;
   margin: 0;
   border-radius: 2px;
 }
@@ -1683,26 +1682,28 @@ a:focus {
   clear: both;
 }
 .timeline > li > .timeline-item {
-  margin-top: 10px;
-  border: 0px solid #dfdfdf;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  margin-top: 0px;
   background: #fff;
-  color: #555;
+  color: #444;
   margin-left: 60px;
   margin-right: 15px;
-  padding: 5px;
+  padding: 0;
   position: relative;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 }
 .timeline > li > .timeline-item > .time {
   color: #999;
   float: right;
-  margin: 2px 0 0 0;
+  padding: 10px;
+  font-size: 12px;
 }
 .timeline > li > .timeline-item > .timeline-header {
   margin: 0;
   color: #555;
   border-bottom: 1px solid #f4f4f4;
-  padding: 5px;
+  padding: 10px;
   font-size: 16px;
   line-height: 1.1;
 }
@@ -1718,20 +1719,18 @@ a:focus {
   padding: 5px;
   display: inline-block;
   background-color: #fff;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
   border-radius: 4px;
 }
 .timeline > li > .fa,
 .timeline > li > .glyphicon,
 .timeline > li > .ion {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   width: 30px;
   height: 30px;
   font-size: 15px;
   line-height: 30px;
   position: absolute;
   color: #666;
-  background: #eee;
+  background: #d2d6de;
   border-radius: 50%;
   text-align: center;
   left: 18px;

pages/UI/timeline.html

@@ -534,7 +534,9 @@
                     <span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span>
                     <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
                     <div class="timeline-body">
-                      <iframe width="300" height="169" src="//www.youtube.com/embed/fLe_qO4AE-M" frameborder="0" allowfullscreen></iframe>
+                      <div class="embed-responsive embed-responsive-16by9">
+                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tMWkeBIohBs" frameborder="0" allowfullscreen></iframe>                        
+                      </div>
                     </div>
                     <div class="timeline-footer">
                       <a href="#" class="btn btn-xs bg-maroon">See comments</a>
@@ -543,7 +545,7 @@
                 </li>
                 <!-- END timeline item -->
                 <li>
-                  <i class="fa fa-clock-o"></i>
+                  <i class="fa fa-clock-o bg-gray"></i>
                 </li>
               </ul>
             </div><!-- /.col -->