jam-cloud/web/app/assets/stylesheets/users/syncViewer.css.scss

@import "client/common";

.sync-viewer {
  width: 100%;

  .list {
    height:400px;
    overflow:auto;
    border-style:solid;
    border-width:0 0 1px 0;
    border-color:#AAAAAA;
  }

  .knobs {

  }
  .headline {
    height:40px;
    @include border_box_sizing;
    @include vertical-align-row;

    .download-progress, .upload-progress {
      width:200px;
      line-height:30px;
      .paused {
        display:none;
        color:#777;
        font-size:11px;
      }
      .quiet {
        display:none;
        color:#777;
        font-size:11px;
      }
      &.paused {
        .paused {
          display:inline-block;
        }
      }

      &.quiet {
        .quiet{
          display:inline-block;
        }
      }
      &.busy {
        .busy {
          display:inline-block;
          width:100%;
        }
      }
    }

    .in-progress {
      @include border_box_sizing;
      @include vertical-align-row;
      text-align:center;

      .sync {
        line-height:20px;
        height:30px;

        .type {
          position:relative;
          width:100%;
          font-size: 10px;
        }
        .text {
          z-index:1;
        }
        .avatar-tiny {
          margin-top:-4px;
          z-index:1;
        }
        .instrument-icon {
          margin-top:-3px;
          z-index:1;
        }
      }
    }
  }


  .list-header {
    width:100%;
    height:16px;
    font-size:12px;
    .type-info {
      float:left;
      width:26%;
      @include border_box_sizing;
      @include vertical-align-column;
    }
    .client-state-info {
      float:left;
      padding: 0 4px;
      width:37%;
      @include border_box_sizing;
      @include vertical-align-column;
    }
    .upload-state-info {
      float:left;
      width:37%;
      @include border_box_sizing;
      @include vertical-align-column;
    }

    .special {
      font-size:12px;
      border-width:1px 1px 0 1px;
      border-style:solid;
      border-color:#cccccc;
      width:100%;
      text-align:center;
      @include border_box_sizing;
    }

    .special-text {
      width:100%;
      text-align:center;
      @include border_box_sizing;
    }
  }

  .sync {
    margin:3px 0;
    display:inline-block;
    @include border_box_sizing;
    padding:3px;
    background-color:black;
    width:100%;
    line-height:28px;
    @include border-radius(2px);

    @include vertical-align-row;
  }

  .type {
    float:left;
    width:26%;
    color:white;
    padding:3px;
    @include border_box_sizing;
    @include vertical-align-row;

    .instrument-icon {
      width:24px;
      height:24px;
    }
  }

  .msg {
    z-index:1;
  }

  .progress {
    position:absolute;
    background-color:$ColorScreenPrimary;
    height:100%;
    top:0px;
    left:0;
  }

  @include mix-state-box;
  .mix-state {
    position:relative;
    float:left;
    width:74%;
    @include vertical-align-row;
  }

  @include client-state-box;
  .client-state {
    position:relative;
    float:left;
    width:37%;
    @include vertical-align-row;
  }

  @include upload-state-box;
  .upload-state {
    position:relative;
    float:left;
    width: 37%;
    @include vertical-align-row;
  }

  .recording-holder {
    margin-top:10px;
    padding: 5px 0 0 0;
    width:100%;
    @include border_box_sizing;
    @include vertical-align-column;

    .timeago {
      float:right;
    }
  }

  .log-list {
    height:392px;
    overflow:auto;
    border-style:solid;
    border-width:0 0 1px 0;
    border-color:#AAAAAA;
  }

  .log {

    @include border_box_sizing;
    @include border-radius(2px);
    width:100%;
    margin:3px 0;
    display:inline-block;
    padding:3px;
    background-color:black;
    height:20px;
    font-size:12px;
    color:white;

    &.success-false {
      background-color:$error;
    }

    .command {
      float:left;
      width:33%;
      text-align:center;
      position:relative;

      img {
        position:absolute;
        left:0;
        top:-1px;
      }
    }

    .success {
      float:left;
      width:33%;
      text-align:center;
    }

    .detail {
      float:left;
      width:33%;
      text-align:center;
    }
  }

  .badge {
    display:none;
    margin-left:5px;
    height:11px;
    width:12px;
    color:white;
    font-size:10px;
    padding-top:2px;
    background-color:$error;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    vertical-align: top;
  }

  .tab-content[purpose="log"] {
    display:none;

    .list-header {
      .list-column {
        float:left;
        width:33%;
        text-align:center;
      }
    }
  }

  .paginator-holder {
    text-align:center;
  }
}