.pipelines { .stage { max-width: 90px; width: 90px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .commit-title { margin: 0; } .controls { white-space: nowrap; } .btn { margin: 4px; } .table.builds { min-width: 1200px; .branch-commit { width: 33%; } } } .content-list { &.pipelines, &.builds-content-list { width: 100%; overflow: auto; } } .pipeline-holder { width: 100%; overflow: auto; } .table.builds { min-width: 900px; &.pipeline { min-width: 650px; } tr { th { padding: 16px 8px; border: none; } td { padding: 10px 8px; } } tbody { border-top-width: 1px; } .commit-link { .ci-status { svg { top: 1px; margin-right: 0; } } a:hover { text-decoration: none; } } .branch-commit { .branch-name { font-weight: bold; max-width: 150px; overflow: hidden; display: inline-block; white-space: nowrap; vertical-align: top; text-overflow: ellipsis; } svg { height: 14px; width: 14px; vertical-align: middle; fill: $table-text-gray; } .fa { font-size: 12px; color: $table-text-gray; } .commit-id { color: $gl-link-color; margin-right: 8px; } .commit-title { margin-top: 4px; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .avatar { margin-left: 0; } .label { margin-right: 4px; } .label-container { font-size: 0; .label { margin-top: 5px; } } } .icon-container { display: inline-block; text-align: right; width: 15px; .fa { position: relative; right: 3px; } svg { position: relative; right: 1px; } } .stage-cell { font-size: 0; svg { height: 18px; width: 18px; position: relative; z-index: 2; vertical-align: middle; overflow: visible; } .stage-container { display: inline-block; position: relative; margin-right: 6px; .tooltip { white-space: nowrap; } &:not(:last-child) { &::after { content: ''; width: 8px; position: absolute;; right: -7px; bottom: 8px; border-bottom: 2px solid $border-color; } } a { display: block; } } } .duration, .finished-at { color: $table-text-gray; margin: 4px 0; .fa { font-size: 12px; margin-right: 4px; } svg { width: 12px; height: 12px; vertical-align: middle; margin-right: 4px; } } .pipeline-actions { min-width: 140px; .btn { margin: 0; color: $table-text-gray; } .cancel-retry-btns { vertical-align: middle; .btn:not(:first-child) { margin-left: 8px; } } .dropdown-toggle, .dropdown-menu { color: $table-text-gray; .fa { color: $table-text-gray; font-size: 14px; } svg, .fa { margin-right: 0; } } .btn-remove { color: $white-light; } .btn-group { &.open { .btn-default { background-color: $white-normal; border-color: $border-white-normal; } } .btn { .icon-play { height: 13px; width: 12px; } } } } .build-link { a { color: $gl-dark-link-color; } } .btn-group.open .dropdown-toggle { box-shadow: none; } } // Pipeline visualization .toggle-pipeline-btn { background-color: $gray-dark; &.graph-collapsed { background-color: $white-light; } } .pipeline-graph { width: 100%; overflow: auto; white-space: nowrap; transition: max-height 0.3s, padding 0.3s; &.graph-collapsed { max-height: 0; padding: 0 16px; } } .pipeline-visualization { position: relative; ul { padding: 0; } } .stage-column { display: inline-block; vertical-align: top; &:not(:last-child) { margin-right: 44px; } &.left-margin { &:not(:first-child) { margin-left: 44px; .left-connector { &::before { content: ''; position: absolute; top: 50%; left: -48px; border-top: 2px solid $border-color; width: 48px; height: 1px; } } } } li { list-style: none; } .stage-name { margin: 0 0 15px 10px; font-weight: bold; width: 176px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .build { border: 1px solid $border-color; position: relative; padding: 8px 10px; border-radius: 30px; width: 186px; margin-bottom: 10px; &.playable { background-color: $gray-light; svg { height: 12px; width: 12px; position: relative; top: 1px; path { fill: $layout-link-gray; } } } .build-content { width: 164px; .ci-status-icon { svg { height: 20px; width: 20px; } } .ci-status-text { width: 135px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; display: inline-block; position: relative; top: -1px; } a { color: $layout-link-gray; text-decoration: none; &:hover { .ci-status-text { text-decoration: underline; } } } .dropdown-menu-toggle { border: none; width: auto; padding: 0; color: $layout-link-gray; .ci-status-text { width: 112px; } } .grouped-pipeline-dropdown { padding: 8px 0; width: 168px; left: auto; right: -180px; top: -9px; max-height: 245px; overflow-y: scroll; a { padding: 7px 8px; margin: 0 8px; &:hover { .ci-status-text { text-decoration: none; } } } svg { width: 14px; height: 14px; } .ci-status-text { width: 112px; } .arrow { &:before, &:after { content: ''; display: inline-block; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; top: 18px; } &:before { left: -5px; margin-top: -6px; border-width: 7px 5px 7px 0; border-right-color: $border-color; } &:after { left: -4px; margin-top: -9px; border-width: 10px 7px 10px 0; border-right-color: $white-light; } } } .badge { background-color: $gray-dark; color: $layout-link-gray; font-weight: normal; } } svg { vertical-align: middle; margin-right: 5px; } // Connect first build in each stage with right horizontal line &:first-child { &::after { content: ''; position: absolute; top: 50%; right: -48px; border-top: 2px solid $border-color; width: 48px; height: 1px; } } // Connect each build (except for first) with curved lines &:not(:first-child) { &::after, &::before { content: ''; top: -47px; position: absolute; border-bottom: 2px solid $border-color; width: 25px; height: 69px; } // Right connecting curves &::after { right: -25px; border-right: 2px solid $border-color; border-radius: 0 0 20px; } // Left connecting curves &::before { left: -25px; border-left: 2px solid $border-color; border-radius: 0 0 0 20px; } } // Connect second build to first build with smaller curved line &:nth-child(2) { &::after, &::before { height: 29px; top: -7px; } .curve { display: block; } } } &:last-child { .build { // Remove right connecting horizontal line from first build in last stage &:first-child { &::after, &::before { border: none; } } // Remove right curved connectors from all builds in last stage &:not(:first-child) { &::after { border: none; } } // Remove opposite curve .curve { &::before { display: none; } } } } &:first-child { .build { // Remove left curved connectors from all builds in first stage &:not(:first-child) { &::before { border: none; } } // Remove opposite curve .curve { &::after { display: none; } } } } // Curve first child connecting lines in opposite direction .curve { display: none; &::before, &::after { content: ''; width: 21px; height: 25px; position: absolute; top: -31.5px; border-top: 2px solid $border-color; } &::after { left: -44px; border-right: 2px solid $border-color; border-radius: 0 20px; } &::before { right: -44px; border-left: 2px solid $border-color; border-radius: 20px 0 0; } } } .pipeline-actions { border-bottom: none; } .toggle-pipeline-btn { .fa { color: $dropdown-header-color; } } .pipelines.tab-pane { .content-list.pipelines { overflow: auto; } .stage { max-width: 100px; width: 100px; } .pipeline-actions { min-width: initial; } } .ci-status-icon-created { svg { fill: $gray-darkest; } }