Subversion Repositories SmartDukaan

Rev

Rev 17586 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

@import 'common.less';


.rech-head{
  background:darken(@list-color2,5%);
  border-top:@list-color1 solid 1px;
  padding:0 3px;
  .boxsize;
  width:100%;
  position:relative;
  > div:nth-of-type(1), > div:nth-of-type(3){
    .float(left);
    width:49%;
    padding:10px 0;
    .font(1.6em);
    font-weight:bold;
    color:@grey;
    text-align:center;
    .boxsize;
    text-transform:uppercase;
    height:45px;
    line-height:22px;
  }
  > div:nth-of-type(3){
    .float(right)!important;  
  }
  > div:nth-of-type(2){
    .float(left);
    width:2%;
    margin: 5px 0 5px -0.5px;
    max-width:1px;
    height:35px;
    background:@grey;
    text-align:center;
    position: absolute;
    left: 50%;
  }
  .selected{
    color:@ltblue!important;
    border-bottom:@ltblue solid 5px;
  }
  
}

.dth-recharge{
h1{
   text-align:center;
   color:@grey;
   font-weight: normal;
  }
}

form{
  padding:10px 0;
  background:@list-color2;
  text-align:center;
  fieldset{
    border:none;
  }
  
  label{
    font-weight:bold;
    display:block;
    .font(1.4em);
    color:@grey;
    text-align:left;
  }
  input,select{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    border:@list-color1 solid 1px;
    background-color:@white;
    color:@grey;
    border-radius:0;
    outline:none;
    padding:10px;
    display:block;
    .boxsize;
    .font(1.4em);
    margin:2px 0 8px 0;
    text-align:left;
  }
  
  .price{
    position:relative;
  }
  .price:before{
    content:'Rs';
    position:absolute;
  }
  
  select{
    background:url('../images/dropdown.PNG')no-repeat 99% 17px,@white;
    background-size:20px,100%;
  }
  
  input[type="submit"], input[type="button"]{
  margin:15px 0;
  background:@orange;
  color:@white;
  .font(1.8em);
  text-align:center;
  padding:10px 0;
  text-transform:uppercase;
  }
    
}

/*---------------------------------topup div -------------------------------*/

.topup-cont{
  background:rgba(0,0,0,0.5);
  position: absolute;
  top: 0px;
  width: 100%;
  min-height:100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  .topup-wrapper{
    margin:30px 20px;
    background:@white;
    padding: 10px 2px;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.8);
  }
  p:first-child{
    color:@grey;
    .font(1.6em);
    margin:5px 0;
    font-weight:bold;
    .float(left);
  }
  .close{
    .float(right);
    position:relative;
    width:38px;
    height:38px;
    background:url('../images/cancel.png')no-repeat 8px 7px;
    background-size:23px;
    top: -10px;
    right: -5px;
  }
  .topup-cont-head{
     width:100%!important;
      margin-top:0px!important;
      padding:5px 0;
       background:@grey;
      .boxsize;
    >div{
      .font(1.4em)!important;
      color:@white;
      border-right:@white solid 1px;
      background:@grey!important;
      margin:0!important;
      text-align:center!important;
    }
    >div:last-child{
      border-right:none;
    }
     
}  
.topup-cont-body{
  width:100%!important;
  >div{
    //border-bottom:lighten(@grey,45%) solid 1px;
  }
}
  
  .topup-cont-head >div:nth-of-type(1),.topup-cont-body >div:nth-of-type(3n+1){
    .font(1.2em);
      .float(left);
      width:18%;
      .boxsize;
      .boxsize;
      padding:7px 3px;
      text-align:center;
      background:@orange;
      color:@white;
      margin:3px 0;
  }
  
  .topup-cont-head >div:nth-of-type(2), .topup-cont-body >div:nth-of-type(3n+2){
      .font(1.2em);
      .float(left);
      width:23%;
      .boxsize;
      padding:7px 3px;
      text-align:center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin:3px 0;
  }
  .topup-cont-head >div:nth-of-type(3),.topup-cont-body >div:nth-of-type(3n+3){
    .font(1.2em);
      .float(left);
      width:59%;
      .boxsize;
      padding:7px 3px;
      text-align:left;
      margin:3px 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
  }
  
  .topup-cont-body >div:nth-of-type(1), .topup-cont-body >div:nth-of-type(2), .topup-cont-body >div:nth-of-type(3){
    margin-top:5px;
  }
  
}

.plans-btn{
  text-align:center;
  margin:10px 0 8px;
  padding:10px;
  background:@white;
  border:@list-color1 solid 1px;
  p{
    .font(1.6em);
    color:@grey;
  }
  >div{
    padding:6px 0;
    width:40%;
    background:@ltblue;
    color:@white;
    .font(1.4em);
    margin-top:5px;
  }
  >div:nth-of-type(1){
    .float(left);
  }
  >div:last-child{
    .float(right);
  }
}

/*-----------------------------------recharge-onfirmation---------------------------------*/

.conf-head{
  width:100%;
  background:@list-color2;
  margin-top:1px;
  padding:5px 10px;
  .boxsize;
  color:@grey;
  .font(1.6em);
  font-weight:bold; 
}
.conf-cont{
  background: @list-color2;
   padding:0px 10px 10px 10px;
  .conf-div{
     color:@grey;
    .font(1.4em);
    > div:nth-of-type(odd){
      .float(left);
      width:70%;
    }
    >div:nth-of-type(even){
      .float(left);
      width:30%;
     }
    >div:nth-of-type(odd){
      
    }
  }
  .pay-now{
    margin-top:10px;
    background: @orange;
    text-transform: uppercase;
    color: @white;
    padding: 10px;
    text-align: center;
    .font(1.6em);
  }
}

.coupon-code{
  margin-top:10px;
  border:@list-color1 solid 1px;
  background:@white;
  >div:nth-of-type(1){
    padding:10px 5px;
    background:@grey;
    color:@white;
    .font(1.4em);
  }
  >div:nth-of-type(2){
    padding:10px 5px 10px;
    input[type="text"]{
    color:@grey;
      .float(left);
      .boxsize;
      width:55%;
      border:@list-color2 solid 1px;
      padding:0 4px;
      height:30px;
      line-height:30px;
      display:block;
  }
  .apply-coupon{
    .font(1.4em);
      .float(right);
      width:40%;
      background:@extgrey;
      color:@black;
      height:30px;
      line-height:30px;
      text-align:center;
  }
 }
}

.gd-total{
    border:lighten(@grey,45%) solid 1px;
    background:@white;
    margin-top:10px;
    color:@grey;
      >div:nth-of-type(1){
        .float(left);
         width:60%;
        .font(1.6em);
        .boxsize;
        padding:10px 5px;
        border-right:lighten(@grey,45%) solid 1px;
      }
      >div:nth-of-type(2){
        .float(left);
        width:40%;
        .font(1.6em);
        .boxsize;
        padding:10px 5px;
        text-align:center;
      }
    }

#captcha, #clickCaptcha{
  text-align:center;
  margin:10px 0;
}

#coupon_msg{
  //background:@green;
}
/*----------------------error-msg---------------------------*/

.error_msg{
  padding:5px;
  display:block;
  border:red dotted 1px;
  background:@list-color2;
  color:red;
  .font(1.4em);
  margin:10px;
}

@import 'common.less';


.rech-head{
  background:darken(@list-color2,5%);
  border-top:@list-color1 solid 1px;
  padding:0 3px;
  .boxsize;
  width:100%;
  position:relative;
  > div:nth-of-type(1), > div:nth-of-type(3){
    .float(left);
    width:49%;
    padding:10px 0;
    .font(1.6em);
    font-weight:bold;
    color:@grey;
    text-align:center;
    .boxsize;
    text-transform:uppercase;
    height:45px;
    line-height:22px;
  }
  > div:nth-of-type(3){
    .float(right)!important;  
  }
  > div:nth-of-type(2){
    .float(left);
    width:2%;
    margin: 5px 0 5px -0.5px;
    max-width:1px;
    height:35px;
    background:@grey;
    text-align:center;
    position: absolute;
    left: 50%;
  }
  .selected{
    color:@ltblue!important;
    border-bottom:@ltblue solid 5px;
  }
  
}

form{
  padding:10px;
  background:@list-color2;
  fieldset{
    border:none;
  }
  
  label{
    font-weight:bold;
    display:block;
    .font(1.4em);
    color:@grey;
  }
  input,select{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    border:@list-color1 solid 1px;
    background-color:@white;
    color:@grey;
    border-radius:0;
    outline:none;
    padding:10px;
    display:block;
    .boxsize;
    .font(1.4em);
    margin:2px 0 8px 0;
  }
  
  .price{
    position:relative;
  }
  .price:before{
    content:'Rs';
    position:absolute;
  }
  
  select{
    background:url('../images/dropdown.PNG')no-repeat 99% 17px,@white;
    background-size:20px,100%;
  }
  
  input[type="submit"]{
  margin:15px 0;
  background:@orange;
  color:@white;
  .font(1.8em);
  text-align:center;
  padding:10px 0;
  text-transform:uppercase;
  }
    
}

/*---------------------------------topup div -------------------------------*/

.topup-cont{
  padding:5px;
  p:first-child{
    color:@grey;
    .font(1.6em);
    margin:5px 0;
    font-weight:bold;
    .float(left);
  }
  .close{
    .float(right);
    position:relative;
    width:38px;
    height:38px;
    background:url('../images/cancel.png')no-repeat 8px 7px;
    background-size:23px;
    top: -10px;
    right: -5px;
  }
  .topup-cont-head{
     width:100%!important;
      padding:5px 0;
       background:@grey;
      .boxsize;
    >div{
      .font(1.4em)!important;
      color:@white;
      border-right:@white solid 1px;
      background:@grey!important;
      margin:0!important;
      text-align:center!important;
    }
    >div:last-child{
      border-right:none;
    }
     
}  
.topup-cont-body{
  width:100%!important;
  >div{
    //border-bottom:lighten(@grey,45%) solid 1px;
  }
}
  
  .topup-cont-head >div:nth-of-type(1),.topup-cont-body >div:nth-of-type(3n+1){
    .font(1.2em);
      .float(left);
      width:22%;
      .boxsize;
      .boxsize;
      padding:7px 3px;
      text-align:center;
      background:@orange;
      color:@white;
      margin:3px 0;
  }
  
  .topup-cont-head >div:nth-of-type(2), .topup-cont-body >div:nth-of-type(3n+2){
      .font(1.2em);
      .float(left);
      width:23%;
      .boxsize;
      padding:7px 3px;
      text-align:center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin:3px 0;
  }
  .topup-cont-head >div:nth-of-type(3),.topup-cont-body >div:nth-of-type(3n+3){
    .font(1.2em);
      .float(left);
      width:55%;
      .boxsize;
      padding:7px 3px;
      text-align:left;
      margin:3px 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
  }
  
}

.plans-btn{
  text-align:center;
  margin:10px 0 8px;
  padding:10px;
  background:@white;
  border:@list-color1 solid 1px;
  p{
    .font(1.6em);
    color:@grey;
  }
  >div{
    padding:6px 0;
    width:40%;
    background:@ltblue;
    color:@white;
    .font(1.4em);
    margin-top:5px;
  }
  >div:nth-of-type(1){
    .float(left);
  }
  >div:last-child{
    .float(right);
  }
}

/*-----------------------------------recharge-confirmation---------------------------------*/

.conf-head{
  width:100%;
  background:@list-color2;
  margin-top:1px;
  padding:5px 10px;
  .boxsize;
  color:@grey;
  .font(1.6em);
  font-weight:bold; 
}
.conf-cont{
  background: @list-color2;
   padding:0px 10px 10px 10px;
  .conf-div{
     color:@grey;
    .font(1.4em);
    > div{
      .float(left);
      width:50%;
    }
    // >div:nth-of-type(2n+1){
      // min-width:130px;
    // }
    >div:nth-of-type(odd){
      
    }
  }
  .pay-now{
    margin-top:10px;
    background: @orange;
    text-transform: uppercase;
    color: @white;
    padding: 10px;
    text-align: center;
    .font(1.6em);
  }
}

.coupon-code{
  margin-top:10px;
  border:@list-color1 solid 1px;
  background:@white;
  >div:nth-of-type(1){
    padding:10px 5px;
    background:@grey;
    color:@white;
    .font(1.4em);
  }
  >div:nth-of-type(2){
    padding:10px 5px 10px;
    input[type="text"]{
    color:@grey;
      .float(left);
      .boxsize;
      width:55%;
      border:@list-color2 solid 1px;
      padding:0 4px;
      height:30px;
      line-height:30px;
      display:block;
  }
  .apply-coupon{
    .font(1.4em);
      .float(right);
      width:40%;
      background:@extgrey;
      color:@black;
      height:30px;
      line-height:30px;
      text-align:center;
  }
 }
}

.gd-total{
    border:lighten(@grey,45%) solid 1px;
    background:@white;
    margin-top:10px;
    color:@grey;
      >div:nth-of-type(1){
        .float(left);
         width:60%;
        .font(1.6em);
        .boxsize;
        padding:10px 5px;
        border-right:lighten(@grey,45%) solid 1px;
      }
      >div:nth-of-type(2){
        .float(left);
        width:40%;
        .font(1.6em);
        .boxsize;
        padding:10px 5px;
        text-align:center;
      }
    }

#captcha, #clickCaptcha{
  text-align:center;
  margin:10px 0;
}

#coupon_msg{
  //background:@green;
}

.conf-cont .mobile-recharge{
      padding:0px;
}

.mobile-recharge{
  h1{
   text-align:center;
   color:@grey;
   font-weight: normal;
  }
 
}

/*----------------------error-msg---------------------------*/

.error_msg{
  padding:5px;
  display:block;
  border:red dotted 1px;
  background:@list-color2;
  color:red;
  .font(1.4em);
  margin:10px;
}

/*----------------------payment-hldr-------------------------*/

.payment-hldr{
  background:@list-color2;
  padding:5px 5px 10px;
  .hldr-sub{
    margin-top:10px;
    background:@white;
    border:lighten(@grey,45%) solid 1px;
    >div:nth-of-type(1){
      color:@ltblue;
      font-weight:bold;
    }
    form{
    background:@white;
    padding:0;
    }
    form fieldset{
      border:none;
    }
    
    .cc-hldr{
      border:lighten(@grey,45%) solid 1px;
      border-bottom:none;
      width: 100%;
      .boxsize;
     div{
      .float(left);
      width: 50%;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      .font(1.4em);
      color: @white;
      background: @grey;
      padding: 10px 0;
      text-align: center;
    }
    .selected{
      background: @white!important;
      color: @ltblue!important;
      font-weight:bold;
    }
    }
    
    > .card{
      color:@grey;
      padding:7px 5px;
      .font(1.6em);
      border-top:lighten(@grey,45%) solid 1px;
      >span{
        .float(right);
      }
    } 
    > .card:first-child{
      border-top:none;
    }   
  }  
  .credit-cards{
    padding:0 5px 5px 5px;
    .in-india, .out-india{
      width:100%;
      padding:20px 0 10px; 
      border:lighten(@grey,45%) solid 1px;
      border-top:none;
      .boxsize;
      p{
        text-align:center;
        .font(1.2em);
        margin:10px 0 0 0;
        color:@grey;
        .float(left);
        width:100%;
      }
    }
  }
  
  .info-hldr{
    form fieldset{
      border:none;
    }
    padding:0 5px 5px 5px;
    .info-cap{
      color:@grey;
      .font(1.2em);
    }
    .emi-hldr{
      border:lighten(@grey,45%) solid 1px;
      border-bottom:none;
        .emi-head{
          border-bottom:lighten(@grey,45%) solid 1px;
          .font(1.2em);
          font-weight:bold;
          background:@list-color1;
          >div{
          .float(left);
          width:33.3%;
          color:@grey;
          text-align:center;
          padding:7px 2px;
          .boxsize;
          }
        }
        .emi-body{
          border-bottom:lighten(@grey,45%) solid 1px;
          .font(1.2em);
          color:@grey;
          >div{
          .float(left);
          width:33.3%;
          text-align:center;
          padding:7px 2px;
          .boxsize;
          }
        }
         .emi-body.selected{
            background:lighten(@green, 10%);
            color:@white!important;
            box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
        }
    }
  }
  
      
    .c-box{
      padding:0 5px;
       div{
        float:left;
        width:30%;
        .boxsize;
        text-align:center;
        padding:2px;
        border:@white solid 2px;
        //opacity: 0.6;
        img{
          width:80%;
          height: 50px;
          max-width: 90px;
        }
      }
      div:nth-of-type(3n+2){
        margin:0 5%;
      }
      .selected{
        border:@ltblue solid 2px;
        opacity: 1;
      }
      p{
        clear:both;
      }
    }
    
    
  
  .c-info{
    color:@grey;
    .font(1.4em);
    padding:0 0 20px; 
    text-align:center;
  }
  .payment-btn{
    appearance:none;
    -webkit-appearance:none;
    border:none;
    width:100%;
    background:@orange;
    color:@white;
    .font(1.8em);
    padding:8px 0;
    margin:15px 0 10px;
  }
  
  
}

/*-------------recharge-confirmation-----------------------*/

.r-hldr{
  background:@list-color1;
  //padding:0 10px 10px 10px;
  .r-head{
    .font(1.6em);
    font-weight:bold;
    background:@list-color2;
    color:@grey;
    padding:5px 10px;
    //border-bottom:@white solid 2px;
  }
  .r-cont{
    padding:0 10px;
    >div{
      padding:5px;
      .font(1.4em);
      .float(left);
      width:40%;
      color:@grey;
      .boxsize;
      padding-right:5px;
    }
    >div:nth-of-type(1){
      font-weight:bold;
    }
  }
  
  .r-info{
    padding:10px;
  }
    .r-info-head{
     width:100%!important;
      //margin-top:10px;
      padding:5px 0;
       background:@grey;
      .boxsize;
    >div{
      .font(1.4em)!important;
      color:@white!important;
      border-right:@white solid 1px;
      background:@grey!important;
      margin:0!important;
      text-align:center!important;
    }
    >div:last-child{
      border-right:none;
    }
     
}  

.r-info-head >div:nth-of-type(1),.r-info-body >div:nth-of-type(1){
      .font(1.2em);
      .float(left);
      width:40%;
      .boxsize;
      padding:7px 3px;
      text-align:center;
      color:@grey;
      margin:3px 0;
  }
  
  .r-info-head >div:nth-of-type(2), .r-info-body >div:nth-of-type(2){
      .font(1.2em);
      .float(left);
      width:30%;
      .boxsize;
      padding:7px 3px;
      text-align:center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin:3px 0;
      color:@grey;
      text-align:center;
  }
  .r-info-head >div:nth-of-type(3),.r-info-body >div:nth-of-type(3){
    .font(1.2em);
      .float(left);
      width:30%;
      .boxsize;
      padding:7px 3px;
      text-align:left;
      margin:3px 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color:@grey;
      text-align:center;
  }
}

.update-address{
  margin:10px 0;
}

/*-------------recharge-faq-----------------------*/
.faq-hldr{
  h2{
    background:@list-color1;
    padding:10px;
    color:@grey;
    .font(2.0em);
    border-top:@white solid 1px;
    border-bottom:@white solid 1px;
    text-transform:uppercase;
  }
  .faq-head{
    color: #555555;
    font: normal 1.8em/1.2em Helvetica, Arial, sans-serif;
    padding: 10px;
    /* border-bottom: 1px solid #ccc; */
    border-width: 1px 0;
    background-color: #f8f5ee;
    margin-bottom: 1px;
      >span{
        .float(right);
        //margin-top:4px;
      }
  }
  .faq-body{
    margin: 5px 0px;
  }
  .faq-question, .qst{
    color:@blue;
    .font(1.4em);
    padding:5px 10px;
    //background:@list-color2;
    margin-bottom: 2px;
    >span{
      color:@grey;
    }
  }
  .faq-answer ,.ans{
    color:@grey;
    .font(1.2em);
    padding:10px;
    background:@white;
    img{
      margin:5px 0;
      border:@grey solid 1px;
      max-width:300px;
    }
    ul{
      margin: 10px 0 10px 15px;
      list-style-type: circle;
    }
    ul li{
      margin-bottom:5px;
    }
    p{
      margin-bottom:4px;
    }
    a{
      color:@ltblue;
      text-decoration:underline;
    }
  }
}


/**********************************emi page*************************************/

.bank-name{
  .font(1.4em);
  padding:8px;
  .boxsize;
  background:@sub-list;
  color:@white;
  margin-top:1px;
  span{
    float:right;
  }
}

.emi-head{
  color:@grey;
  .font(1.6em);
  padding:8px;
}

.bank-emi > div{
  border-bottom:lighten(@sub-list, 30%) solid 1px;
  padding:8px;
}

.bank-emi > div >div{
  .font(1.2em);
  color:@grey;
}

.bank-emi > div >div:nth-of-type(1){
  .float(left);
}
.bank-emi > div >div:nth-of-type(2){
  .float(right);
}
.bank-emi > div >div:nth-of-type(3){
  .float(right);
}
.re-confirm{
  padding:0!important;
}


/*********************************static page**************************************/

.otg-cont h2, .instore h2, .insure-mobile h2{
  padding:10px;
    background:@list-color1;
    .font(1.8em);
    color:@grey;
}

.otg-cont{

  p{
    .font(1.4em);
    color:@grey;
    margin:10px 10px 0px 10px;
  }
  
  ul{
    list-style-type:circle;
    margin:10px 0 10px 50px;
    padding-right: 10px;
    color:@grey;
    li{
      .font(1.4em);
    }
  }
  h3{
    margin:5px 0;
    padding:10px;
    background:@list-color1;
    .font(1.6em);
    color:@grey;
  }
  ol{
    list-style-type:decimal;
    padding-right: 10px;
   > li{
      .font(1.4em);
      margin:10px 0 10px 35px;
      ul{
        margin: 10px 0 10px 20px;
        padding-right: 10px;
         li{
           .font(1.0em);
           margin: 10px 0 10px 0px;
         }
         
      }
    }
  }
}

.instore{
   .qst{
     background:@list-color2;
     padding:10px;
     .font(1.4em);
     color:@grey;
   }
   
   .qst:before{
     content:"Q: ";
     font-weight:bold;
   }
   .ans{
     padding:10px;
     .font(1.2em);
     color:@grey;
   }
   .ans:before{
     content:"Ans: ";
     font-weight:bold;
   }
  
}

.insure-mobile{
   ul{
    list-style-type:circle;
    margin:10px 0 10px 30px;
    padding-right: 10px;
    color:@grey;
    li{
      .font(1.4em);
    }
}
}

.fetch-operator{
  .font(1.2em);
  color:@white;
  background:@grey;
  padding:5px 10px;
  display:inline-block;
}

.walletlogin{border: 1px solid #ccc;font-size: 1.4em;margin: 10px 0;padding: 4px;text-align: center;
  a{font-weight:bold;text-decoration:underline;}
}