/* ------------------------------------------------------------------------------
 *
 *  # Pace. Corners theme
 *
 *  Corners css spinner theme for Pace.
 *
 *  Version: 1.0
 *  Latest update: May 25, 2015
 *
 * ---------------------------------------------------------------------------- */


// Preloader template. Default dark background
// ------------------------------

.preloader,
.preloader-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: @color-slate-800; // Change it to any suitable dark color
  z-index: 9000; 
  .opacity(0.9);
}

// Light background
.preloader-light {
  background-color: #fff; /* Change it to any suitable light color */
}

// Change colors for the light version. Feel free to change colors
.pace-light {
  .pace-activity {
    background-color: @color-teal-300;
  }
  .pace-progress:after {
    color: @color-teal-300;
  }
}


// Pace theme styles
// ------------------------------

// Base
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  .user-select(none);

  position: fixed;
  top: 50%;
  left: 50%;
  height: 30px;
  width: 30px;
  margin-left: -15px;
  margin-top: -15px;
  z-index: 9999;
}

// Activity
.pace-activity {
  width: 12px;
  height: 12px;
  margin: 9px;
  background-color: #fff;
  border-radius: @border-radius-large;
  .animation(corners 1.5s ease infinite);
}

// Hide inactive
.pace-inactive {
  display: none;
}

// Animation
@keyframes corners {
    0% { transform: rotate(0deg); }
    50% { transform: scale(1.5) rotate(180deg); border-radius: 0; }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes corners {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: scale(2) rotate(180deg); border-radius: 0; }
    100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes corners {
    0% { -moz-transform: rotate(0deg); }
    50% { -moz-transform: scale(2) rotate(180deg); border-radius: 0; }
    100% { -moz-transform: rotate(360deg); }
}



// Uncomment code below to show loader text with indicator

/*
.pace-progress:after {
  content: attr(data-progress-text);
  text-align: center;
  width: 100%;
  display: inline-block;
  color: #FFF;
  position: absolute;
  top: 36px;
}
*/