@import url("../../resources/css/base.less");

// an area to embed inline app screens
#inlineAppArea {

  .packageManager{
    position:relative;

    #packageManagerToolbar{
      height: 36px;
      /*
                  background: @lightGreyBase;
                  font-size: 0.7em;
                  color:#efefed;
          text-align: center;
      */

      >* {
        font-size:0.8em;
        float:left;
        height: 30px;
      }

      #uploadApp {
        border:none;
        background:transparent;
        margin: 0;
        width:8em;
        float:left;
        text-align:left;

        img {
          margin: 0 0 0 12px;
        }
      }

      .centered{
        width: 40em;
        text-align: center;
        padding-top: 9px;
      }
      .right{
        width: 8em;
        padding-top: 9px;
      }
    }

    #listWrapper{
      float:left;
      overflow:auto;
      height:@inlineAppHeight;
      width:100%;

      ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
        .active .toolbar {
          display: inline-block;
        }
      }
      ul li{
        float: left;
        margin: 5px 0 0 5px;
        position:relative;
        .border-radius-custom(0px, 20px, 0px, 0px);
        width:100%;

        .ribbon{
          position:absolute;
          right: 0;
          width: 80px;
        }
        .toolbar {
          display:none;
          text-align:center;
          width: 100%;
          .toobarBtn {
            background:0083c9;
            img {
              width: 32px;
            }
          }
        }


      }

      /*ul li:focus{
          .toolbar{
              display:inline-block;
              text-align:center;
              width:100%;

              .toobarBtn{
                  img {
                      width: 32px;
                  }
              }
          }
      }*/
      ul li.installed{
        background-color:@installedColor ;

        .ribbon{
          opacity: 1;
        }
      }
      ul li.notInstalled{
        background-color: @notInstalledColor;

        .ribbon{
          opacity: 0.4;
        }
      }
      table{
        background: transparent;
        margin-left:178px;
        margin-bottom:10px;
        width:500px;
        //                padding-left:30px;

        th,td {
          text-align: left;
          font-size:0.7em;
          vertical-align: top;

          form {
            padding: 0;
          }
        }

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

          li{
            margin: 0;
          }
        }
      }
      .packageIconArea{
        width:150px;
        float: left;
        margin: 15px 15px 0 15px;
        height:80px;
        position:relative;

        .appIcon {
          max-width: 128px;
          height: 100%
        }

        .appFunctions{
          display: none;
          position: absolute;
          top: 0px;
          right: 0px;
          z-index: 20;

          .deleteApp, .installApp {
            padding: 0;
            margin: 0;
            border: none;
            background: none;

            /*
                                    img{
                                        width: 16px;
                                    }
            */
          }
        }

      }
      .package:hover .appFunctions{
        display: inline-block;
      }

      .shortTitle {
        h3 {
          font-family: @font-family-headings;
          font-size: 1.5em;
          font-weight: normal;
          margin: 5px 0;
        }
        p {
          font-size: .75em;
          margin:0;
        }
        p.upgrade {
          color: darkred;
          font-weight: bold;
        }
        p.requires {
          font-weight: bold;
          margin-top: 0;
        }
      }
      h3{
        margin-right:78px !important;
      }
      .shortView{

        li{
          height:80px;
          padding-bottom:10px;
        }
        table{
          display:none;
        }
        .shortTitle {
          h3 {
            font-family: @font-family-headings;
            font-size: 1.2em;
            display:block;
            margin-top: 5px;
            src: local('Quicksand'), local('Quicksand'), url('sKd0EMYPAh5PYCRKSryvW7O3LdcAZYWl9Si6vvxL-qU.woff') format('truetype');

          }
        }
        .packageIconArea{
          .appIcon{
            height: 50%;
          }
        }
      }

      //for hiding installed apps
      .hideInstalled .installed{
        display:none;
      }
      //for hiding not installed apps
      .hideNotInstalled .notInstalled{
        display:none;
      }
    }
    #listWrapper > ul > li{
      border:thin solid @lighterGrey2;
      //             min-height: 120px;
    }


  }
}

#package-upload-dialog {
  width: 520px;

  p {
    text-align: center;
    font-size: 85%;
  }

  form.file_upload {

    .file_upload_body {
      position: relative;
      overflow: hidden;
      direction: ltr;
      cursor: pointer;
      text-align: center;
      color: #555;
      font-weight: bold;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      width: 15em;
      line-height: 2.5em;
      border: 3px dashed orange;
      margin-left: auto;
      margin-right: auto;
      height: auto;

      input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        border: 300px solid transparent;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        -o-transform: translate(-300px, -300px) scale(10);
        -moz-transform: translate(-800px, 0) scale(10);
        cursor: pointer;
        height: 100%;
      }

      button {
        display: none;
      }
    }

    .file_upload_label {
      display: block;
    }

    .file_upload_body:hover {
      border: 3px dashed lawngreen;
    }
  }

  .overall-progress {
    position: relative;
    width: 100%;
    margin-top: 20px;
    .bar {
      height: 18px;
      background: url(images/progressbar.gif);
    }
    .progress-label {
      position: absolute;
      left: 10px;
      top: 0;
    }
  }

  .queue {
    display: block;
    width: 100%;
    height: 160px;
    overflow: auto;
    margin: 8px 0;
    font-size: 85%;

    .files {
      width: 100%;
      margin: 0;
      tr {
        td {
          padding: 4px 6px;
          text-align: right;
          border-bottom: 1px solid #E0E0E0;
        }
        td.name {
          min-width: 120px;
          font-weight: bold;
          text-align: left;
        }
        td.progress {
          width: 180px;
          margin: 8px auto;

          .bar {
            height: 18px;
            background: url(images/progressbar.gif);
          }
        }
      }
    }
  }
}