icingaweb2/public/css/icinga/setup.less

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

#setup {
  .header {
    width: 100%;
    height: 5.4em;
    background-color: #555;
    background-image: -moz-linear-gradient(top, #777, #555);
    background-image: -webkit-linear-gradient(top, #777, #555);
    background-image: -o-linear-gradient(top, #777, #555);
    background-image: -ms-linear-gradient(top, #777, #555);
    background-image: linear-gradient(top, #777, #555);

    img {
      width: 12.5em;
      margin: 0.5em;
      float: left;
    }

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

      .step {
        float: left;

        h1 {
          margin: 0;
          color: white;
          font-size: 1em;
          text-align: center;
        }

        table {
          margin-top: 0.7em;

          td {
            padding: 0;

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

        div {
          background-color: lightgrey;

          &.line {
            height: 0.5em;

            &.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.5em;
            height: 1.5em;
            border-radius: 1.5em;

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

          &.active {
            background-color: white;
          }

          &.complete {
            background-color: #2e8b57;
          }

          &.visited {
              background-color: #77bf97;
          }
        }
      }
    }
  }

  .setup-content {
    margin: 1.5em 1.8em 0 1.8em;
  }
}

#setup div.buttons {
  margin-top: 1.5em;

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

  #btn_prev {
    margin-right: 1em;
  }

  button, .button-like {
    padding: 0.5em 1em;
    font-weight: bold;
    outline: 0;
    border: 1px solid black;
    border-radius: 0.2em;
    background: #666;
    color: #eee;

    &[disabled="1"] {
      background-color: #aaa;
      border: 1px dotted black;
    }

    &:hover, &:focus {
      background-color: #333;

      &[disabled="1"] {
        background-color: #aaa;
      }
    }

    &.install, &.login {
      width: 25em;
      color: #fffafa;
      background: #aaa;

      &:hover, &:focus {
        background: #888;
      }
    }
  }

  a.button-like {
    cursor: default;
    text-decoration: none;
  }
}

#setup table.requirements {
  margin-top: -1em;
  margin-left: -1em;
  border-spacing: 1em;
  border-collapse: separate;

  td {
    h2 {
      margin: 0 1em 0 0;
    }

    &.state {
      color: white;
      padding: 0.4em;
      border-radius: 0.2em;

      &.fulfilled {
        background-color: #4fad4b;
      }

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

      &.missing {
        background-color: #fd7770;
      }
    }
  }
}

#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 {
  div.page {
    float: left;
    width: 30em;
    padding: 0 1em 1em;
    margin: 1em 2em 2em;
    border-radius: 0.5em;
    border: 1px dashed lightgrey;

    h2 {
      font-size: 1.2em;
    }

    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 {
    clear: left;
  }
}

.conspicuous-state-notification {
  width: 66%;
  margin: 0 auto;
  padding: 0.5em;
  color: white;
  font-weight: bold;
  border-radius: 1em;
}

#installer {
  div.report {
    padding: 1em;
    border-radius: 2em;
    background-color: #eee;

    div.line-separator {
      width: 50%;
      height: 1px;
      margin: 0 auto;
      background-color: white;
    }

    p {
      margin: 1em;
      color: #444;
      text-align: center;

      &.error {
        color: red;
      }

      &.failure {
        .conspicuous-state-notification;
        background-color: @colorCritical;
      }

      &.success {
        .conspicuous-state-notification;
        background-color: @colorOk;
      }
    }
  }

  div.buttons {
    text-align: center;
  }
}

#setup_welcome {
  text-align: center;

  h2 {
    font-size: 1.5em;
  }

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