pace.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. .pace {
  2. -webkit-pointer-events: none;
  3. pointer-events: none;
  4. -webkit-user-select: none;
  5. -moz-user-select: none;
  6. user-select: none;
  7. }
  8. .pace-inactive {
  9. display: none;
  10. }
  11. .pace .pace-progress {
  12. background: @red;
  13. position: absolute;
  14. z-index: 2000;
  15. top: @navbar-height;
  16. right: 100%;
  17. width: 100%;
  18. height: 3px;
  19. margin-left: @sidebar-width;
  20. }
  21. .pace .pace-progress-inner {
  22. display: block;
  23. position: absolute;
  24. right: 0px;
  25. width: 100px;
  26. margin-right: @sidebar-width;
  27. height: 100%;
  28. box-shadow: 0 0 10px @red, 0 0 5px @red;
  29. opacity: 1.0;
  30. -webkit-transform: rotate(3deg) translate(0px, -4px);
  31. -moz-transform: rotate(3deg) translate(0px, -4px);
  32. -ms-transform: rotate(3deg) translate(0px, -4px);
  33. -o-transform: rotate(3deg) translate(0px, -4px);
  34. transform: rotate(3deg) translate(0px, -4px);
  35. }
  36. .pace .pace-activity {
  37. display: block;
  38. position: absolute;
  39. z-index: 2000;
  40. top: @navbar-height + 10;
  41. right: 15px;
  42. width: 14px;
  43. height: 14px;
  44. border: solid 2px transparent;
  45. border-top-color: #29d;
  46. border-left-color: #29d;
  47. border-radius: 10px;
  48. -webkit-animation: pace-spinner 400ms linear infinite;
  49. -moz-animation: pace-spinner 400ms linear infinite;
  50. -ms-animation: pace-spinner 400ms linear infinite;
  51. -o-animation: pace-spinner 400ms linear infinite;
  52. animation: pace-spinner 400ms linear infinite;
  53. }
  54. @-webkit-keyframes pace-spinner {
  55. 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  56. 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  57. }
  58. @-moz-keyframes pace-spinner {
  59. 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  60. 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
  61. }
  62. @-o-keyframes pace-spinner {
  63. 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  64. 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
  65. }
  66. @-ms-keyframes pace-spinner {
  67. 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  68. 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
  69. }
  70. @keyframes pace-spinner {
  71. 0% { transform: rotate(0deg); transform: rotate(0deg); }
  72. 100% { transform: rotate(360deg); transform: rotate(360deg); }
  73. }