@import "strider-colors";

.plugin-status {
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 10px 20px;
}

.build-error .alert {
  margin-bottom: 0;
  border-radius: 0;
  padding: 0.3em 0.8em;

  pre {
    margin-top: 0.2em;
  }
}

.job_view {
  .body-content {
    min-height: 300px;
    overflow: visible;

    #build-page {
      a, .clickable {
        color: black;
        cursor: pointer;
        &:hover {
          text-decoration: none;
          color: #999;
        }
      }

      // The header above the console output.
      #build-metadata {
        padding: 1em 0.8em;

        .branch,
        .commit-url,
        .run-time time,
        .finished-at time {
          line-height: 30px;
        }

        .progress-meter {
          min-width: 50px;
        }

        .job-link-id {
          padding: 0 5px;
          vertical-align: super;
        }

        .committer img {
          max-width: 30px;
        }

        .current-build-menu {
          .dropdown-menu {
            top: 28px;
          }
        }
      }

      .job-pre-console {
        margin: 0;
      }

      .console-output {
        overflow-y: auto;
        overflow-x: visible;
        -webkit-flex: 1;
        flex: 1;

        .loading-icon {
          margin-top: 20px;
          margin-left: 20px;
          color: #333;
        }

        .prompt {
          color: yellow;
          margin-left: 5px;
        }

        .plus {
          color: #070;
          font-size: 10px;
        }

        .arrow {
          color: #070;
        }

        .phase.collapsed {
          .arrow {
            margin-left: 2px;
          }
        }

        .command {
          &.comment {
            .title {
              .prompt, .command-text {
                color: #70c;
              }
            }
          }

          > .title {
            cursor: pointer;
            padding-right: 10px;

            &:hover {
              background-color: #222;
            }

            .meta {
              color: #999;

              time {
                width: 41px;
                display: inline-block;
                text-align: right;
              }

              .plugin {
                color: #09a;
              }
            }
          }
        }

        &, pre {
          background-color: black;
          font-family: monospace;
          color: white;
        }

        pre {
          padding: 0 0 0 5px;
          margin: 0;
          border-radius: 0;
          border-width: 0;
        }

        .phase {
          margin-bottom: 2px;

          &:last-child {
            margin-bottom: 0;
          }

          > .title {
            background-color: #333;
            padding: 5px 5px 5px 10px;
            margin-bottom: 5px;
            cursor: pointer;

            .meta {
              margin-right: 5px;
            }

          }
        }
      }

      .build-list-header {
        width: 90%;
      }

      #list-of-builds {
        margin: 0;
        overflow: auto;

        .build-list-item {
          width: auto;
          padding: 5px;
          border-bottom: 1px solid #b5b3b3;
        }

        .job-link {
          display: inline-block;
          font-family: monospace;
        }

        .commit-info {
          .committer {
            display: inline-block;
            padding: 0;

            img {
              height: 20px;
              width: 20px;
              max-width: inherit;
            }
            @media (max-width: 1400px) {
              display: none;
            }
          }

          // For the commit message, we want to use the available space as well as possible.
          // We attempt to use the best possible width for different screen sizes.
          .commit-url {
            display: inline-block;
            max-width: 416px;
            vertical-align: middle;
          }
        }

        .branch {
          display: block;
          font-weight: bold;
        }

        .time-info {
          margin: 0 3px -3px;
          text-align: right;
        }

        .progress {
          margin-bottom: 6px;
        }
      }

      .failed {
        &:hover {
          background-color: lighten(@strider-bg-failed, 35%);
        }

        &.active {
          border-left: 6px solid @strider-bg-failed;
          background-color: lighten(@strider-bg-failed, 25%);
        }
      }

      .errored {
        &:hover {
          background-color: lighten(@strider-bg-errored, 30%);
        }

        &.active {
          border-left: 6px solid @strider-bg-errored;
          background-color: lighten(@strider-bg-errored, 25%);
        }
      }

      .passed {
        &:hover {
          background-color: lighten(@strider-bg-passed, 35%);
        }

        &.active {
          border-left: 6px solid @strider-bg-passed;
          background-color: lighten(@strider-bg-passed, 25%);
        }
      }

      .running {
        &:hover {
          background-color: lighten(@strider-bg-running, 35%);
        }

        &.active {
          border-left: 6px solid @strider-bg-running;
          background-color: lighten(@strider-bg-running, 25%);
        }
      }

      tr:hover {
        background-color: #eee;
      }
    }

    .job-title {
      margin-bottom: 0.85em;

      h3 {
        line-height: 34px;

        .job-repo {
          margin-left: 0.2em;
        }

        .test-only-action {
          color: green;
        }

        .test-and-deploy-action {
          color: rgb(41, 0, 255);
        }
      }
    }

    .job-link {
      min-width: 80px;
    }

    .summary-icon {
      display: none;
    }
  }

  #spinner {
    display: inherit;
  }

  .job-detail-sidebar {
    right: 0;
  }

  .job-left-col div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .job-left-col {
    left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

// Make the console output and past builds fill the full height of the browser.
.job_view {
  height: 100%;
  .wrap {
    .content {
      height: 100%;
      .body-content {
        height: 100%;
        > .row-fluid {
          height: 100%;
          .span12 {
            height: 100%;
            .app {
              height: 100%;
              #build-page {
                height: 100%;
                > div {
                  height: 100%;
                  .job-main {
                    height: 95%;
                    padding-bottom: 20px;
                    .job-wrap {
                      height: 100%;
                      .job-left-col {
                        height: 100%;
                      }
                    }
                  }
                  .job-detail-sidebar {
                    height: 100%;
                    #list-of-builds {
                      height: 96%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  pre.console-output {
    position: static;
    max-height: 500px;
  }

  .job_view #build-metadata .span3 {
    display: inline-block;
  }

  .job_view #build-metadata .span9 {
    width: 75%;
    float: right;
  }

  .job_view #list-of-builds .span6:first-child,
  .job_view #build-metadata .span6:first-child {
    float: left;
  }
}

@media (max-width: 768px) {
  .console-output {
    position: static;
  }
}
