ui/css/src/scss/components/install-wizzard.scss

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

.install-wizard {
  position: relative;
  width: 1024px;
  height: 768px;
  margin: auto;
  border-top: 0;
}

body.install-wizard {
  height: 769px !important; //TODO important may be removed
  background: #ffffff url('../images/bg-login.png');
  font-family: sans-serif;
  overflow: auto;
  overflow-x: hidden;
}

.install-wizard .header {
  z-index: $z-index-install-wizard1;
  height: 365px;
  padding: 32px 0 89px;
  background: url('../images/bg-login.png');
  color: #626e82;
  /*+text-shadow:0px 1px 2px #FFFFFF;*/
  text-align: center;
  text-shadow: 0 1px 2px #ffffff;
  -moz-text-shadow: 0 1px 2px #ffffff;
  -webkit-text-shadow: 0 1px 2px #ffffff;
  -o-text-shadow: 0 1px 2px #ffffff;
}

.install-wizard .header h3 {
  font-size: 20px;
}

.install-wizard .step {
  max-width: 691px;
  margin: auto;
  padding: 56px 0 0;
}

.install-wizard .step .title {
  clear: both;
  width: 303px;
  margin: auto auto 30px;
  font-size: 22px;
  color: #626e82;
}

.install-wizard .step .subtitle {
  font-size: 12px;
  font-weight: bold;
  color: #4b5e69;
}

.install-wizard .step p {
  background: url('../images/bg-gradient-white-transparent.png') repeat-x -114px -270px;
  font-size: 15px;
  line-height: 23px;
  color: #4a4a4a;
}

.install-wizard .step ul li {
  width: 465px;
  margin: 14px 0 0 18px;
  font-size: 13px;
  list-style: disc;
}

.install-wizard .step .field {
  margin: 0 0 12px;
  text-align: left;
}

.install-wizard .step .field label {
  display: block;
  clear: both;
  font-size: 11px;
  color: #4d4d4d;
}

.install-wizard .step .field label.error {
  font-size: 11px;
  color: #ff2424;
}

.install-wizard .body {
  z-index: $z-index-install-wizard2;
  width: 1012px;
  height: 762px;
  margin: -352px auto auto;
  box-shadow: 0 -3px 4px #cfcfcf;
  /*+box-shadow:0px -3px 4px #CFCFCF;*/
  background: url('../images/bg-gradient-white-transparent.png') repeat-x -114px -141px;
  -moz-box-shadow: 0 -3px 4px #cfcfcf;
  -webkit-box-shadow: 0 -3px 4px #cfcfcf;
  -o-box-shadow: 0 -3px 4px #cfcfcf;
}

.install-wizard h2 {
  margin: 0 0 19px;
  font-size: 28px;
}

.install-wizard input[type='text'],
.install-wizard input[type='password'],
.install-wizard input[type='text'],
.install-wizard select {
  width: 288px;
  /*+border-radius:4px;*/
  padding: 6px;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  border-radius: 4px 4px 4px 4px;
  box-shadow: inset 0 1px #aeaeae;
  background: #f7f7f7;
  /*+box-shadow:inset 0px 1px #AEAEAE;*/
  font-size: 14px;
  color: #232323;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-box-shadow: inset 0 1px #aeaeae;
  -webkit-box-shadow: inset 0 1px #aeaeae;
  -o-box-shadow: inset 0 1px #aeaeae;
  -moz-box-shadow: inset 0 1px 0 #aeaeae;
  -webkit-box-shadow: inset 0 1px 0 #aeaeae;
  -o-box-shadow: inset 0 1px 0 #aeaeae;
}

.install-wizard .button {
  float: right;
  margin-top: 15px;
  /*+border-radius:4px;*/
  padding: 7px 16px 7px 18px;
  border: 1px solid #505050;
  border-radius: 4px;
  border-radius: 4px 4px 4px 4px;
  background: url('../images/bg-gradients.png') 0 -221px;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 -1px 3px #3f4351;
  /*+text-shadow:0px -1px 3px #3F4351;*/
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-text-shadow: 0 -1px 3px #3f4351;
  -webkit-text-shadow: 0 -1px 3px #3f4351;
  -o-text-shadow: 0 -1px 3px #3f4351;
}

.install-wizard .button.advanced-installation,
.install-wizard .button.go-back {
  float: left;
  border: 1px solid #c7c2c2;
  background: #e0dede;
  /*+text-shadow:0px 0px #FFFFFF;*/
  color: #3b3b3b;
  text-shadow: 0 0 #ffffff;
  -moz-text-shadow: 0 0 #ffffff;
  -webkit-text-shadow: 0 0 #ffffff;
  -o-text-shadow: 0 0 #ffffff;
}

.install-wizard .button.go-back {
  padding: 9px 16px 10px 18px;
  font-size: 12px;
}

.install-wizard .setup-form .button.go-back {
  /*+placement:shift 15px -14px;*/
  position: relative;
  top: -14px;
  left: 15px;
}

.install-wizard .step {
  position: relative;
  z-index: $z-index-install-wizard3;
}

.install-wizard .step .tooltip-info {
  /*+placement:shift 547px 50px;*/
  position: relative;
  position: absolute;
  top: 50px;
  left: 547px;
}

/*** Intro*/
.install-wizard .step.intro.what-is-cloudstack p {
  height: 540px;
  background: url('../images/bg-what-is-cloudstack.png') no-repeat 50% 237px;
}

/*** Diagram*/
.install-wizard .diagram {
  position: relative;
  position: absolute;
  /*+placement:shift 65px 496px;*/
  z-index: $z-index-install-wizard2;
  top: 496px;
  left: 65px;
  width: 910px;
  height: 385px;
}

.install-wizard .diagram .part {
  display: none;
  background: url('../images/install-wizard-parts.png') no-repeat;
}

.install-wizard .diagram .part.zone {
  position: relative;
  position: absolute;
  top: 222px;
  /*+placement:shift 77px 222px;*/
  left: 77px;
  width: 742px;
  height: 135px;
  background-position: -267px -580px;
}

.install-wizard .diagram .part.loading {
  position: relative;
  position: absolute;
  top: -67px;
  /*+placement:shift 105px -67px;*/
  left: 105px;
  width: 742px;
  height: 432px;
  background-position: -1264px -487px;
}

.install-wizard .diagram .part.loading .icon {
  position: relative;
  top: 130px;
  left: 322px;
  /*+placement:shift 322px 130px;*/
  width: 61px;
  height: 76px;
  background: url('../images/ajax-loader.gif') no-repeat;
}

.install-wizard .diagram .part.pod {
  position: relative;
  position: absolute;
  top: -76px;
  /*+placement:shift 313px -76px;*/
  left: 313px;
  width: 266px;
  height: 396px;
  background-position: -47px -3px;
}

.install-wizard .diagram .part.cluster {
  position: relative;
  position: absolute;
  top: -76px;
  /*+placement:shift 313px -76px;*/
  left: 313px;
  width: 266px;
  height: 396px;
  background-position: -364px 1px;
}

.install-wizard .diagram .part.host {
  position: relative;
  position: absolute;
  top: -76px;
  /*+placement:shift 313px -76px;*/
  left: 313px;
  width: 266px;
  height: 396px;
  background-position: -688px 1px;
}

.install-wizard .diagram .part.primaryStorage {
  position: relative;
  position: absolute;
  top: -76px;
  /*+placement:shift 306px -76px;*/
  left: 306px;
  width: 275px;
  height: 396px;
  background-position: -1046px 1px;
}

.install-wizard .diagram .part.secondaryStorage {
  position: relative;
  position: absolute;
  top: -76px;
  /*+placement:shift 306px -76px;*/
  left: 306px;
  width: 385px;
  height: 396px;
  background-position: -1469px 1px;
}

/*** Setup form*/
.install-wizard .step .setup-form {
  display: inline-block;
  width: 469px;
  border: 1px solid #dfdfdf;
  box-shadow: 0 5px 9px #9f9f9f;
  /*+text-shadow:0px 1px #FFFFFF;*/
  background: url('../images/bg-transparent-white.png');
  text-shadow: 0 1px #ffffff;
  -moz-text-shadow: 0 1px #ffffff;
  -webkit-text-shadow: 0 1px #ffffff;
  -o-text-shadow: 0 1px #ffffff;
  -moz-text-shadow: 0 1px 0 #ffffff;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  /*+box-shadow:0px 5px 9px #9F9F9F;*/
  -o-text-shadow: 0 1px 0 #ffffff;
  -moz-box-shadow: 0 5px 9px #9f9f9f;
  -webkit-box-shadow: 0 5px 9px #9f9f9f;
  -o-box-shadow: 0 5px 9px #9f9f9f;
}

.install-wizard .step .setup-form .title {
  float: left;
  margin: 17px 0 0 29px;
  color: #626f7c;
}

.install-wizard .step .setup-form .field {
  display: inline-block;
  width: 389px;
  margin: 6px 0 1px 31px;
  padding: 9px;
  color: #57646d;
}

.install-wizard .step .setup-form .field .name {
  float: left;
  width: 98px;
  padding: 10px 0 0 0;
  font-size: 13px;
  text-align: right;
}

.install-wizard .step .setup-form .field .value {
  float: right;
}

.install-wizard .step .setup-form input[type='text'],
.install-wizard .step .setup-form input[type='password'] {
  width: 278px;
  margin: 6px 4px 0 0;
  padding: 2px 2px 1px;
  border: 1px solid #8d8d8d;
}

.install-wizard .step .setup-form .range-item {
  float: left;
  width: 142px;
}

.install-wizard .step .setup-form .range-item input {
  width: 131px;
}

.install-wizard .step .setup-form .multi-range input[type='text'] {
  width: 128px;
}

.install-wizard .step .setup-form input.button {
  margin: 0 30px 14px 15px;
}

/*** Step: Change user*/
.install-wizard .step.change-user {
  width: 316px;
  margin: auto;
  padding-top: 95px;
  text-align: center;
}

.install-wizard .step.intro iframe {
  width: 99%;
  height: 99%;
  margin: 4px;
}

.install-wizard .step.intro .title {
  margin-bottom: 21px;
  margin-left: 0;
  font-size: 25px;
  color: #565454;
}

.install-wizard .step.intro .subtitle {
  margin-bottom: 9px;
}

.install-wizard .step.intro .subtitle li {
  position: relative;
  width: 45%;
  height: 24px;
  padding: 1px 0 1px 30px;
  background: url('../images/ajax-loader-small.gif') no-repeat 3px 0;
  list-style: none;
}

.install-wizard .step.intro .subtitle li.complete {
  background: url('../images/icons.png') -1px -224px;
}

.install-wizard .step.intro .subtitle li.error {
  background: url('../images/icons.png') -1px -190px;
}

.install-wizard .step.intro .subtitle li img {
  float: right;
}