1 files changed, 23 insertions, 37 deletions

diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index 9ab7ac8f394..fcf185df4a8 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -6,59 +6,45 @@
   font-size: 13px;
   word-break: break-all;
   word-wrap: break-word;
-  color: $gl-text-color;
-  background-color: $gray-light;
-  border: 1px solid $border-color;
+  color: $gl-text-color-inverted;
   border-radius: $border-radius-small;
-
-  clear: left;
   min-height: 42px;
-  color: #f1f1f1;
-  line-height: 19px;
-  background-color: #222;
+  background-color: $builds-trace-bg;
 }
 
 .line {
-  position: relative;
-  white-space: normal;
-  padding: 0 15px 0 62px;
-  margin: 0;
-}
-
-.line-text {
-  overflow-wrap: break-word;
+  padding: 1px $gl-padding 1px $job-log-line-padding;
 }
 
 .line-number {
-  color: #f1f1f1;
-  padding: 0 10px;
-
-
-  display: inline-block;
-    text-align: right;
-    min-width: 40px;
-    margin-left: -40px;
-    cursor: pointer;
-    text-decoration: none;
-    position: absolute;
-    padding-right: 1em;
-
-  &:hover {
+  color: $gl-text-color-inverted;
+  padding: 0 $gl-padding-8;
+  min-width: $job-line-number-width;
+  margin-left: -$job-line-number-width;
+  padding-right: 1em;
+
+  &:hover,
+  &:active,
+  &:visited {
     text-decoration: underline;
-    color: #f1f1f1;
+    color: $gl-text-color-inverted;
   }
 }
 
 .collapsible-line {
-  position: relative;
-  cursor: pointer;
-
   &:hover {
     background-color: rgba($white-light, 0.2);
   }
 
   .arrow {
-    position: absolute;
-    margin-left: -50px;
+    margin-left: -$job-arrow-margin;
   }
-}
\ No newline at end of file
+}
+
+.duration {
+  background: $gl-gray-400;
+}
+
+.loader-animation {
+  @include build-loader-animation;
+}