Skip to content
Snippets Groups Projects
filedrop.css 5.87 KiB
Newer Older
  • Learn to ignore specific revisions
  • .filedrop .dropzone {
        border: 2px dashed rgba(0, 0, 0, 0.2);
        padding: 8px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.05);
        color: #999;
    }
    .filedrop .dropzone a {
        color: rgba(24, 78, 129, 0.7);
    }
    .filedrop .files:not(:empty) {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 5px 5px 0 0;
        padding: 5px;
    }
    .filedrop .files:not(:empty) + .dropzone {
        border-top: none;
        border-radius: 0 0 5px 5px;
    }
    .filedrop .files .file {
        display: block;
        padding: 5px 10px 5px 20px;
        margin: 0;
        border-radius: 5px;
    }
    .filedrop .files .file:hover {
       background-color: rgba(0, 0, 0, 0.05);
    }
    .filedrop .files .file .filesize {
      margin-left: 1em;
      color: #999;
    }
    .filedrop .files .file .upload-rate {
      margin-right: 10px;
      color: #aaa;
    }
    .filedrop .files .file .trash {
      cursor: pointer;
    }
    
    /* Bootstrap 3.2 progress-bar */
    @-webkit-keyframes progress-bar-stripes {
      from {
        background-position: 40px 0;
      }
      to {
        background-position: 0 0;
      }
    }
    @-o-keyframes progress-bar-stripes {
      from {
        background-position: 40px 0;
      }
      to {
        background-position: 0 0;
      }
    }
    @keyframes progress-bar-stripes {
      from {
        background-position: 40px 0;
      }
      to {
        background-position: 0 0;
      }
    }
    .progress {
      height: 10px;
      overflow: hidden;
      background-color: #f5f5f5;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    }
    .progress-bar {
      float: left;
      width: 0;
      height: 100%;
      font-size: 12px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      background-color: #428bca;
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
              box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
      -webkit-transition: width .6s ease;
           -o-transition: width .6s ease;
              transition: width .6s ease;
    }
    .progress-striped .progress-bar,
    .progress-bar-striped {
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      -webkit-background-size: 40px 40px;
              background-size: 40px 40px;
    }
    .progress.active .progress-bar,
    .progress-bar.active {
      -webkit-animation: progress-bar-stripes 2s linear infinite;
           -o-animation: progress-bar-stripes 2s linear infinite;
              animation: progress-bar-stripes 2s linear infinite;
    }
    .progress-bar[aria-valuenow="1"],
    .progress-bar[aria-valuenow="2"] {
      min-width: 30px;
    }
    .progress-bar[aria-valuenow="0"] {
      min-width: 30px;
      color: #777;
      background-color: transparent;
      background-image: none;
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    .progress-bar-success {
      background-color: #5cb85c;
    }
    .progress-striped .progress-bar-success {
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }
    .progress-bar-info {
      background-color: #5bc0de;
    }
    .progress-striped .progress-bar-info {
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }
    .progress-bar-warning {
      background-color: #f0ad4e;
    }
    .progress-striped .progress-bar-warning {
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }
    .progress-bar-danger {
      background-color: #d9534f;
    }
    .progress-striped .progress-bar-danger {
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }