/*
 * Tab bar specific rules.
 */

@import '../../../less/abstracts/theme.less';

.jenkins-config-widgets {
  position: relative;
  border:1px solid var(--input-border);
  border-bottom:none;
  background: var(--light-grey);
  min-height:2.5em;
  .border-radius-top(@border-radius);
  z-index:5;

  nav:before, nav:after {
    display: none;
  }

  :hover .noTabs{
    color:#bbb;
  }
  .noTabs:hover,
  .showTabs:hover {
    opacity: 0.8;
    background:#bbb;
    color:var(--light-bg-color);
     text-shadow:none;
  }

  @find-container-width: 200px;
  .find-container {
    margin:0;
    display:none;
  }

  .showTabs,
  .noTabs {
    position: absolute;
    border-radius: var(@border-radius);
    right: 5px;
    top: 5px;
    cursor: pointer;
    color: var(--medium-grey);
    text-shadow: var(--brightest-bg-color 0 1px 2px);
    font-size: var(--font-size-sm);
    padding: 3px 7px;
    display:none;
  }

  .form-config.tabBarFrame {
    position: relative;
    border-bottom: solid 1px var(--medium-grey);

    .config-section-activators {
      margin: 0;
      padding: 5px 0 0;
      display: block;
      list-style: none;
    }

    .tabBar {
      .tab {
        border: solid 1px transparent;
        color: var(--text-color-secondary);
        padding: 7px 10px;
        .border-radius-top(5px);
        cursor: pointer;
        margin: 1px 0 0 10px;
        text-decoration: none;
      }
      .tab:hover {
        background: var(--very-light-grey);
        color: var(--text-color-secondary);
        border:1px solid var(--medium-grey);
        border-bottom:1px solid var(--bright-bg-color);
      }
      .tab.active {
        background: var(--background);
        color: var(--text-color);
        font-weight: bold;
        z-index: 2;
        border:1px solid var(--medium-grey);
        border-bottom:1px solid var(--bright-bg-color);
      }
    }

  }

  .form-config.tabBarFrame.mouse-over {
    .noTabs {
      display: inline;
    }
    .noTabs:hover {
      opacity: 0.8;
    }
  }

}
#jenkins{
  .jenkins-config {
    border:1px solid var(--input-border);
    padding:10px;
    border-top:none;
    background:var(--bright-bg-color);
    .border-radius-bottom(@border-radius);

    .showTabs{
      display:block;
      text-align:right;

    }

    table {
      border-collapse: collapse;

      td {
        padding: 5px;
      }

      .repeated-chunk,
      tr[nameref^="rowSetStart"],
      tr[nameref^="cb"],
      tr[nameref^="radio-block"] {
        background: var(--shade-hint);
        border-left: 5px solid var(--shade);
      }

      .hetero-list-container,
      .repeated-container,
      tr.optional-block-start,
      tr.radio-block-start {
        border-left: 5px solid var(--shade);
        background: none;
      }
    }

    .config-table {
      // Table configuration
      table,
      .table {
        border-collapse: collapse;
      }

      // Input elements
      input[type='email'].setting-input,
      input[type='password'].setting-input,
      input[type='text'].setting-input {
        height: var(--input-line-height);
        line-height: var(--input-line-height);
        padding: 0 5px;
        .border-radius(@border-radius);
      }

      select:not([multiple]) {
        height: var(--input-line-height);
        line-height: var(--input-line-height);
      }

      select:not(.select-ajax-pending) {
        border-radius: 0;
        background: var(--brightest-bg-color);
      }

      // Bottom buttons
      .bottom-sticker-edge {
        display:none;
      }
      .bottom-sticker-inner{
        padding: 20px 10px 25px 20px;
        border-top-right-radius: 10px;
        border: 1px solid var(--configure-job-bottom-sticker-border-color);
        background: var(--configure-job-bottom-sticker-bg-color);
      }

      .bottom-sticker,
      #bottom-sticker{
        width: auto;
        margin-left: -10px;
        overflow: hidden;
        padding-bottom: 10px;
        margin: 30px 30px -25px -15px;
        z-index:9;

        .cover{
          position:absolute;
          top:0;
          bottom:0;
          left:0;
          right:0;
          z-index:2;
        }
      }

      // Help & descriptions
      .help {
        background: var(--configure-job-help-area-bg-color);
      }

      p,
      .help,
      .setting-description {
        font-size: var(--font-size-sm);
      }

      tr.help-area,
      .tr.help-area {
        background: none !important;

        td,
        .td {
          padding: 0 5px;
        }
      }

      // Repeatable elements

      .repeated-container > .repeated-chunk {
        padding: 0.75rem;
      }

      .repeated-chunk.hover {
        border-color: var(--line-blue);
        box-shadow: 0 2px 10px var(--shade), inset 0 200px 200px -200px var(--brightest-bg-color);
        position: relative;
        z-index: 2
      }

      .repeated-chunk {
        border: 1px solid var(--shade);
        margin: 2px;
        position: relative;
      }
      // Styling for drag & drop items
      .repeated-chunk.repeated-chunk--sortable-ghost,
      .repeated-chunk.repeated-chunk--sortable-chosen {
        border-width: 2px;
        border-color: var(--line-blue);
      }

      .repeatable-delete {
        position: absolute;
        top: -4px;
        right: 40px;
        height: 20px;
        width: 30px;
      }

      .repeatable-delete button {
        text-align: center;
        text-indent: -9999px;
        width: 30px !important;
        height: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
        .border-radius-top(0) !important;
        background-color: var(--danger);
        color: var(--light-bg-color);
        border: 1px solid var(--danger-line);
        line-height: 12px !important;
        display: inline-block;
        font-size: 8px;
        min-width: 0;
        min-height: 0;

        &:focus,
        &:hover {
          background-color: var(--danger-dark);
          border-color: var(--danger-dark-line);
          color: var(--brightest-bg-color);
        }

        &:before {
          content: 'X';
          font-weight: bold;
          position: absolute;
          display: block;
          left: 0;
          top: 2;
          width: 30px;
          height: 16px;
          text-align: center;
          font-size: 12px;
          text-indent: 0;
        }
      }

      span.highlight {
        background-color: #ffff00;
      }

      // CodeMirror
      .CodeMirror {
        background: var(--brightest-bg-color);
      }

      .CodeMirror-scroll {
        border: 1px solid var(--input-border) !important;
      }
    }
  }
}

.yui-skin-sam .yuimenu {
  z-index: 9999 !important
}

.yui-skin-sam .yui-button-disabled {
  opacity: .75
}
