1 files changed, 125 insertions, 25 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 66f7e7f97c8..f9e8d297c05 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -1,3 +1,34 @@
+@keyframes fade-out-status {
+  0%, 50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes blinking-dots {
+  0% {
+    background-color: rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+
+  25% {
+    background-color: rgba($white-light, 0.4);
+    box-shadow: 12px 0 0 0 rgba($white-light,2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+
+  75% {
+    background-color: rgba($white-light, 0.4);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,1);
+  }
+
+  100% {
+    background-color: rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+}
+
 .build-page {
   pre.trace {
     background: $builds-trace-bg;
@@ -14,47 +45,101 @@
     }
   }
 
-  .scroll-controls {
-    .scroll-step {
-      width: 31px;
-      margin: 0 0 0 auto;
+  .environment-information {
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+    padding: 12px $gl-padding;
+    border-radius: $border-radius-default;
+
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 5px;
     }
+  }
+}
+
+.scroll-controls {
+  height: 100%;
+
+  .scroll-step {
+    width: 31px;
+    margin: 0 0 0 auto;
+  }
+
+  .scroll-link,
+  .autoscroll-container {
+    right: 25px;
+    z-index: 1;
+  }
+
+  .scroll-link {
+    position: fixed;
+    display: block;
+    margin-bottom: 10px;
 
-    &.affix-bottom {
-      position: absolute;
-      right: 25px;
+    &.scroll-top .gitlab-icon-scroll-up-hover,
+    &.scroll-top:hover .gitlab-icon-scroll-up,
+    &.scroll-bottom .gitlab-icon-scroll-down-hover,
+    &.scroll-bottom:hover .gitlab-icon-scroll-down {
+      display: none;
     }
 
-    &.affix {
-      right: 25px;
-      bottom: 15px;
-      z-index: 1;
+    &.scroll-top:hover .gitlab-icon-scroll-up-hover,
+    &.scroll-bottom:hover .gitlab-icon-scroll-down-hover {
+      display: inline-block;
     }
 
-    &.sidebar-expanded {
-      right: #{$gutter_width + ($gl-padding * 2)};
+    &.scroll-top {
+      top: 110px;
     }
 
-    a {
-      display: block;
-      margin-bottom: 10px;
+    &.scroll-bottom {
+      bottom: -2px;
     }
   }
 
-  .environment-information {
-    background-color: $gray-light;
-    border: 1px solid $border-color;
-    padding: 12px $gl-padding;
-    border-radius: $border-radius-default;
+  .autoscroll-container {
+    position: absolute;
+  }
 
-    svg {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
+  &.sidebar-expanded {
+
+    .scroll-link,
+    .autoscroll-container {
+      right: ($gutter_width + ($gl-padding * 2));
     }
   }
 }
 
+.status-message {
+  display: inline-block;
+  color: $white-light;
+
+  .status-icon {
+    display: inline-block;
+    width: 16px;
+    height: 33px;
+  }
+
+  .status-text {
+    float: left;
+    opacity: 0;
+    margin-right: 10px;
+    font-weight: normal;
+    line-height: 1.8;
+    transition: opacity 1s ease-out;
+
+    &.animate {
+      animation: fade-out-status 2s ease;
+    }
+  }
+
+  &:hover .status-text {
+    opacity: 1;
+  }
+}
+
 .build-header {
   position: relative;
   padding: 0;
@@ -109,6 +194,15 @@
   .bash {
     display: block;
   }
+
+  .build-loader-animation {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    margin: auto auto 12px 2px;
+    border-radius: 50%;
+    animation: blinking-dots 1s linear infinite;
+  }
 }
 
 .right-sidebar.build-sidebar {
@@ -248,6 +342,12 @@
   }
 }
 
+.build-sidebar {
+  .container-fluid.container-limited {
+    max-width: 100%;
+  }
+}
+
 .build-detail-row {
   margin-bottom: 5px;