#cycle-analytics { margin: 24px auto 0; position: relative; .col-headers { ul { margin: 0; padding: 0; @include clearfix; } li { display: inline-block; float: left; line-height: 50px; width: 20%; } .fa { color: $cycle-analytics-light-gray; } .stage-header { width: 28%; padding-left: $gl-padding; } .median-header { width: 12%; } .event-header { width: 45%; padding-left: $gl-padding; } .total-time-header { width: 15%; text-align: right; padding-right: $gl-padding; } .stage-name { font-weight: 600; } } .panel { .content-block { padding: 24px 0; border-bottom: none; position: relative; @media (max-width: $screen-sm-min) { padding: 6px 0 24px; } } .column { text-align: center; @media (max-width: $screen-sm-min) { padding: 15px 0; } .header { font-size: 30px; line-height: 38px; font-weight: normal; margin: 0; } .text { color: $layout-link-gray; margin: 0; } &:last-child { @media (max-width: $screen-sm-min) { text-align: center; } } } } .bordered-box { border: 1px solid $border-color; border-radius: $border-radius-default; } .content-list { li { padding: 18px $gl-padding $gl-padding; .container-fluid { padding: 0; } } .title-col { p { margin: 0; &.title { line-height: 19px; font-size: 15px; font-weight: 600; color: $gl-title-color; } &.text { color: $layout-link-gray; &.value-col { color: $gl-title-color; } } } } .value-col { text-align: right; span { position: relative; vertical-align: middle; top: 3px; } } } .landing { margin-bottom: $gl-padding; overflow: hidden; .dismiss-icon { position: absolute; right: $cycle-analytics-box-padding; cursor: pointer; color: #b2b2b2; } .svg-container { text-align: center; svg { width: 136px; height: 136px; } } .inner-content { @media (max-width: $screen-sm-min) { padding: 0 28px; text-align: center; } h4 { color: $gl-text-color; font-size: 17px; } p { color: $cycle-analytics-box-text-color; margin-bottom: $gl-padding; } } } .fa-spinner { font-size: 28px; position: relative; margin-left: -20px; left: 50%; margin-top: 36px; } .stage-panel-body { display: flex; flex-wrap: wrap; } .stage-nav, .stage-entries { display: flex; vertical-align: top; font-size: $gl-font-size; } .stage-nav { width: 40%; margin-bottom: 0; ul { padding: 0; margin: 0; width: 100%; } li { list-style-type: none; @include clearfix; } .stage-nav-item { display: block; line-height: 65px; border-top: solid 1px transparent; border-bottom: solid 1px transparent; border-right: solid 1px $border-color; background-color: $gray-light; &.active { background-color: transparent; border-right-color: transparent; border-top-color: $border-color; border-bottom-color: $border-color; box-shadow: inset 2px 0px 0px 0px $active-item-blue; .stage-name { font-weight: 600; } } &:first-child { border-top: none; } &:last-child { border-bottom: none; } > div { float: left; &.stage-name { width: 70%; } &.stage-median { width: 30%; } } .stage-name { padding-left: 16px; } .stage-empty { color: $gl-text-color-light; } } } .stage-panel { .panel-heading { padding: 0; background-color: transparent; } .events-description { line-height: 65px; padding-left: $gl-padding; } } .stage-events { width: 60%; overflow: scroll; height: 467px; } .stage-event-list { margin: 0; padding: 0; } .stage-event-item { list-style-type: none; padding: 0 0 $gl-padding; margin: 0 $gl-padding $gl-padding $gl-padding; border-bottom: solid 1px $gray-darker; @include clearfix; &:last-child { border-bottom: none; margin-bottom: 0; } .item-details, .item-time { float: left; } .item-details { width: 75%; } .item-title { margin: 0 0 2px 0; &.issue-title, &.commit-title, &.merge-merquest-title { max-width: 100%; display: block; @include text-overflow(); a { color: $gl-dark-link-color; } } } .item-time { width: 25%; text-align: right; } .total-time { font-size: $cycle-analytics-big-font; color: $cycle-analytics-dark-text; span { color: $gl-text-color; font-size: $gl-font-size; } } .issue-date, .build-date { color: $gl-text-color; } .issue-link, .commit-author-link, .issue-author-link { color: $gl-dark-link-color; } // Custom CSS for components .item-conmmit-component { .commit-icon { position: relative; top: 3px; left: 1px; display: inline-block; svg { float: left; } } } .merge-request-branch { a { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; } } } // Custom Styles for stage items .item-build-component { .item-title { .icon-build-status { float: left; margin-right: 5px; position: relative; top: 2px; } .item-build-name { color: $gl-title-color; } .pipeline-id { color: $gl-title-color; padding: 0 3px 0 0; } .branch-name { color: $black; display: inline-block; max-width: 180px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 1.3; vertical-align: top; } .short-sha { color: $gl-link-color; line-height: 1.3; vertical-align: top; font-weight: normal; } .fa { color: $gl-text-color-light; font-size: $code_font_size; } } } .empty-stage { text-align: center; width: 75%; margin: 0 auto; padding-top: 130px; color: $gl-text-color-light; .icon-no-data { height: 36px; width: 78px; display: inline-block; margin-bottom: 20px; } h4 { color: $gl-text-color; } } }