.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; } } .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 { text-align: center; svg { height: 18px; width: 18px; vertical-align: middle; overflow: visible; } } .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; margin-right: 6px; font-size: 14px; } } .btn-remove { color: $white-light; } .btn-group { &.open { .btn-default { background-color: $white-normal; border-color: $border-white-normal; } } } } .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; .caret { border-top: none; border-bottom: 4px solid; } &.graph-collapsed { background-color: $white-light; .caret { border-bottom: none; border-top: 4px solid; } } } .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; margin-right: 65px; li { list-style: none; } .stage-name { margin-bottom: 15px; font-weight: bold; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .build { border: 1px solid $border-color; position: relative; padding: 6px 10px; border-radius: 30px; width: 150px; 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: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; a { color: $layout-link-gray; text-decoration: none; &:hover { .ci-status-text { text-decoration: underline; } } } } svg { position: relative; top: 2px; margin-right: 5px; } // Connect first build in each stage with right horizontal line &:first-child { &::after { content: ''; position: absolute; top: 50%; right: -69px; border-top: 2px solid $border-color; width: 69px; 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: 20px; height: 65px; } // Right connecting curves &::after { right: -20px; border-right: 2px solid $border-color; border-radius: 0 0 15px; } // Left connecting curves &::before { left: -20px; border-left: 2px solid $border-color; border-radius: 0 0 0 15px; } } // Connect second build to first build with smaller curved line &:nth-child(2) { &::after, &::before { height: 29px; top: -10px; } .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: -28.5px; border-top: 2px solid $border-color; } &::after { left: -39px; border-right: 2px solid $border-color; border-radius: 0 15px; } &::before { right: -39px; border-left: 2px solid $border-color; border-radius: 15px 0 0; } } } .pipeline-actions { border-bottom: none; } .toggle-pipeline-btn { .fa { color: $dropdown-header-color; } } .pipelines.tab-pane { .content-list.pipelines { overflow: scroll; } .stage { max-width: 60px; width: 60px; } } .ci-status-icon-created { svg { fill: $table-text-gray; } }