/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */

#layout {
  overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
}


#setup {
  .header {
    width: 100%;
    height: 5.5em;
    background-color: @icinga-blue;
    border-bottom: 1px solid #d9d9d9d;
    text-align: center;


    img {
      width: 7.5em;
      margin: 1.5em;
      float: left;
    }

    form[name='setup_restart_form'] button {
      background: none;
      border: none;
      color: #ffffff;
      cursor: pointer;
      outline: none;
      font-size: 1.4em;
      margin-right: 0.6em;
      -moz-transform: scale(1, -1);
      -webkit-transform: scale(1, -1);
      -o-transform: scale(1, -1);
      -ms-transform: scale(1, -1);
      transform: scale(1, -1);
    }

    .progress-bar {
      overflow: hidden;
      padding-top: 1em;

      .step {
        float: left;

        h1 {
          margin: 0;
          color: white;
          font-size: 0.9em;
          text-align: center;
          border-bottom: none;
        }

        table {
          margin-top: 0.3em;

          td {
            padding: 0;

            &.left, &.right {
              width: 50%;
            }
          }
        }

        div {
          background-color: lightgrey;

          &.line {
            height: 0.4em;

            &.left {
              margin-left: 0.1em;
              margin-right: -0.1em;
              border-top-left-radius: 0.5em;
              border-bottom-left-radius: 0.5em;
            }

            &.right {
              margin-left: -0.1em;
              margin-right: 0.1em;
              border-top-right-radius: 0.5em;
              border-bottom-right-radius: 0.5em;
            }
          }

          &.bubble {
            width: 1.2em;
            height: 1.2em;
            border-radius: 1.2em;

            // Make sure that such a bubble overlays lines
            position: relative;
            z-index: 1337;
          }

          &.active {
            background-color: white;
          }

          &.complete {
            background-color: @color-ok;
          }

          &.visited {
            background-color: #eee;
          }
        }
      }
    }
  }

  .setup-content {
    margin: 1.5em 10em 0 10em;

    h1 {
      font-weight: bold;
    }

    form {
      h2 {
        font-size: 2.0em;
      }
    }
  }
}

#setup div.buttons {
  margin-top: 1.5em; // Yes, -top and -bottom, keep it like that...
  margin-bottom: 1.5em;

  .double {
    position: absolute;
    left: -1337px;
  }

  button.finish, a.button-like.login {
    min-width: 25em;
  }
}

#setup div.buttons + ul.hints {
  margin-top: -1.5em;
  margin-bottom: 1.5em;
}

form#setup_requirements {
  margin-top: 2em;
  padding-top: 0.5em;
  border-top: 1px solid #888;

  div.buttons div.requirements-refresh {
    width: 25%;
    float: right;
    text-align: center;

    a.button-like {
      padding: 0.1em 0.4em;
    }
  }
}

#setup ul.requirements {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    margin-bottom: 1em;

    & > ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    div {
      float: left;
      padding-top: 0.4em;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

    div.title {
      width: 25%;

      h2 {
        padding: 0;
        margin: 0 1em 0 0;
        border-bottom: 0;
      }
    }

    div.description {
      width: 50%;
      border-left: 0.4em solid transparent;
      border-right: 0.4em solid transparent;

      ul {
        margin: 0;
        padding-left: 1em;
        list-style-type: square;
      }
    }

    div.state {
      width: 25%;
      color: white;
      padding: 0.4em;

      &.fulfilled {
        background-color: @color-ok;
      }

      &.not-available {
        color: black;
        background-color: #e8ec70;
      }

      &.missing {
        background-color: @color-critical;
      }
    }
  }
}

#setup_ldap_discovery_confirm table {
  margin: 1em 0;
  border-collapse: separate;
  border-spacing: 1em 0.2em;
}

#setup_admin_account {
  div.instructions {
    width: 30.2em;
    display: inline-block;
  }

  div.radiobox {
    vertical-align: top;
    display: inline-block;
    padding: 0.9em 0.2em 0;
  }
}

#setup {
  div.summary {
    font-size: 90%;

    div.page {
      float: left;
      width: 25em;
      min-height: 25em;
      padding: 0 1em 1em;
      margin: 1em 1.5em 1.5em;
      border: 1px dashed lightgrey;

      h2 {
        font-size: 1.2em;
        font-weight: bold;
      }

      div.topic {
        margin-left: 2em;

        h3 {
          font-size: 1em;
        }

        ul {
          list-style-type: circle;
        }

        table {
          border-spacing: 0.5em;
          border-collapse: separate;
          font-size: 0.9em;
          margin-left: 2em;
        }
      }
    }
  }

  form.summary {
    clear: left;
  }
}

#setup-finish {
  h2 {
    padding: 0.5em;
    border-bottom: 0;
    font-variant: normal;
    font-weight: bold;
    color: white;

    &.success {
      background-color: @color-ok;
    }

    &.failure {
      background-color: @color-critical;
    }
  }

  pre.log-output {
    width: 66%;
    height: 25em;
    max-height: none;
  }

  div.buttons {
    margin-top: 0;
    text-align: center;

    a {
      padding: 0.5em;
    }
  }
}

.welcome-page {
  margin-top: 3em;
  text-align: center;

  h2 {
    font-size: 2.0em;
    margin-bottom: 2em;
  }

  div.info {
    padding: 0 1em;
    background-color: #eee;
    border: 1px solid lightgrey;
  }

  p.restart-warning {
    color: coral;
    font-weight: bold;
  }

  div.note {
    padding: 1em 1em 0;
    margin: 3em auto 0;
    text-align: left;
    font-size: 0.9em;
    border: 1px solid lightgrey;

    h3 {
      padding: 0.2em;
      margin: -1em -1em 1em;
      text-align: center;
      color: @text-color;
      background-color: #f6fafa;
      border: 1px solid lightgrey;
    }

    img {
      float: right;
    }

    p {
      margin: 2em 0 1em 0;

      &:first-child {
        margin-top: 1em;
      }
    }

    div.code {
      margin: 0 2em;

      span {
        display: block;
        font-family: monospace;
      }
    }
  }
}

#setup_monitoring_welcome {
  .welcome-page;
  margin-top: 0;
  padding: 1em;

  h2 {
    margin-top: 0;
  }
}

#setup_modules {
  div.module {
    float: left;
    //width: 15em;
    height: 15em;
    margin: 1em;
    padding: 0.3em;
    border: 1px solid #ccc;
    background-color: snow;

    h3 {
      border: none;
      margin: 0.5em 0;
      text-align: center;

      label {
        margin: 0;
        width: 15em;
        cursor: pointer;
      }
    }

    h3 + label {
      display: inline-block;
      width: 13.5em;
      height: 13.9em;
      overflow: visible;
      cursor: pointer;
      font-weight: normal;
    }

    input[type=checkbox] {
      height: 10em;
      float: right;
      margin: 0;
    }
  }

  div.buttons {
    padding-top: 1em;
    clear: both;
  }
}