├── .DS_Store ├── LICENSE ├── Plugin.php ├── README.md ├── pace.js ├── pace.min.js └── themes ├── black ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── blue ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── green ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── orange ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── pink ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── purple ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── red ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── silver ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css ├── white ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css └── yellow ├── pace-theme-barber-shop.css ├── pace-theme-big-counter.css ├── pace-theme-bounce.css ├── pace-theme-center-atom.css ├── pace-theme-center-circle.css ├── pace-theme-center-radar.css ├── pace-theme-center-simple.css ├── pace-theme-corner-indicator.css ├── pace-theme-fill-left.css ├── pace-theme-flash.css ├── pace-theme-flat-top.css ├── pace-theme-loading-bar.css ├── pace-theme-mac-osx.css ├── pace-theme-material.css └── pace-theme-minimal.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Closty/Process/d712377682b70ba52d158b7c060618d5a39a37f7/.DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Clost 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 介绍 2 | [![](https://img.shields.io/badge/Typecho_plugin-Process-orange?link=https://s.clost.net)](https://github.com/Closty/duanwangzhi) 3 | [![HitCount](http://hits.dwyl.com/closty/process.svg)](http://hits.dwyl.com/closty/process) 4 | [![](https://img.shields.io/badge/by-%E7%93%B6%E5%AD%90-green?link=https://www.clost.net)](https://www.clost.net/default/513.html) 5 | 6 | ![Process2.png](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/05/3614026042.png) 7 | 8 | 这是一款适用于typecho任何主题的加载页面进度条，可以让你的博客加载时显得更加顺滑而不会显得过于突兀,使用本插件可以很好得起到视觉缓冲的作用。本插件有十种颜色可以进行更改，分别是黑、蓝、绿、橙、粉红、紫、银、白、黄。并有十五种主题进行更改，理发店型、萌萌哒跳跃型、大字号数字型、居中常规型等。 9 | 10 | ## 下载 11 | [点击此处下载最新版本][1] 12 | （注：请不要在本页面Download Zip，需要去[链接处release中][1]下载压缩包） 13 | 14 | 15 | 16 | ## 更新 17 | 将Process轻盈化；仅需下载2Kb大小便可拥有数十种Process主题。自带CDN全程加速，Fork本项目后在设置中填入您的Github用户名将使用属于您自己的仓库！如果不想使用CDN请选择[下载1.1版本](https://www.clost.net/index.php/jishujiaocheng/124.html)! 18 | 19 | ## 快速部署 20 | 21 | - 通过上面的github链接，下载最新版本，将会得到一个Process的压缩包，将其解压在typecho根目录`/usr/plugins`下。 22 | - 将以下的代码复制到你想要呈现加载进度的页面。 23 |
24 | 所有界面使用Process？ 25 | 如果想要所有界面都有加载进度条，可以放在`usr/themes/你主题名字如defaut/header.php`的头部，如图所示。 26 | 27 | ![将代码置于header.php中][3] 28 | 29 |
30 | ``` 31 | 32 | render(); ?> 33 | ``` 34 | 35 | - 在typecho后台>控制台>插件，找到Process开启，Fork本项目后在设置中填写您的github用户名并进行更换进度条动画效果、颜色的更改。 36 |
37 | 如何Fork本项目？ 38 | 登陆您的github账号，访问进入github的Process页面中，点击右上角的Fork按钮，如图所示。 39 | 40 | ![Fork本项目][7] 41 | 42 |
43 | 44 | - 至此，访问你的网站，你就可以在你的网站上面看到效果啦！默认动画效果：右上角转蓝色圈 45 | 46 | ## 相关截图 47 | [无法查看图片?](https://www.clost.net/index.php/jishujiaocheng/470.html) 48 | 49 | 50 | 51 | 52 | ![设置界面][4] 53 | 54 | 以下是相关演示；均已设置为黑色，可以自行选择颜色 55 | 56 | ![Process黑色翻转圆圈型][5] 57 | 58 | ![flash控件型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/940786729.gif) 59 | 60 | ![大号数字型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/2668313096.gif) 61 | 62 | ![翻转圆圈型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/2582744789.gif) 63 | 64 | ![缓存加载型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/1988166656.gif) 65 | 66 | ![角示器型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/2302104356.gif) 67 | 68 | ![居中常规型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/3044598873.gif) 69 | 70 | ![雷达扫描型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/3369267188.gif) 71 | 72 | ![萌萌哒跳跃型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/3767308857.gif) 73 | 74 | ![左侧填充型.gif](https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/4085822504.gif) 75 | 76 | 更多主题请自行探索。 77 | 78 | 79 | 80 | [1]: https://github.com/Closty/Process/releases 81 | [3]: https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/3416466155.jpg 82 | [4]: https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/3396169989.png 83 | [5]: https://cdn.jsdelivr.net/gh/614286240/tuchuang/usr/uploads/2020/04/1475598232.gif 84 | [6]: https://github.com/Closty/Process 85 | [7]: https://cdn.jsdelivr.net/gh/closty/tuchuang/usr/uploads/2020/04/3749713206.png 86 | -------------------------------------------------------------------------------- /themes/black/pace-theme-barber-shop.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #000000; 26 | position: fixed; 27 | top: 0; 28 | bottom: 0; 29 | right: 100%; 30 | width: 100%; 31 | overflow: hidden; 32 | } 33 | 34 | .pace .pace-activity { 35 | position: fixed; 36 | top: 0; 37 | right: -32px; 38 | bottom: 0; 39 | left: 0; 40 | 41 | -webkit-transform: translate3d(0, 0, 0); 42 | -moz-transform: translate3d(0, 0, 0); 43 | -ms-transform: translate3d(0, 0, 0); 44 | -o-transform: translate3d(0, 0, 0); 45 | transform: translate3d(0, 0, 0); 46 | 47 | background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); 48 | background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 49 | background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 50 | background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 51 | background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 52 | -webkit-background-size: 32px 32px; 53 | -moz-background-size: 32px 32px; 54 | -o-background-size: 32px 32px; 55 | background-size: 32px 32px; 56 | 57 | -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite; 58 | -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite; 59 | -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite; 60 | -o-animation: pace-theme-barber-shop-motion 500ms linear infinite; 61 | animation: pace-theme-barber-shop-motion 500ms linear infinite; 62 | } 63 | 64 | @-webkit-keyframes pace-theme-barber-shop-motion { 65 | 0% { -webkit-transform: none; transform: none; } 66 | 100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); } 67 | } 68 | @-moz-keyframes pace-theme-barber-shop-motion { 69 | 0% { -moz-transform: none; transform: none; } 70 | 100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); } 71 | } 72 | @-o-keyframes pace-theme-barber-shop-motion { 73 | 0% { -o-transform: none; transform: none; } 74 | 100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); } 75 | } 76 | @-ms-keyframes pace-theme-barber-shop-motion { 77 | 0% { -ms-transform: none; transform: none; } 78 | 100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); } 79 | } 80 | @keyframes pace-theme-barber-shop-motion { 81 | 0% { transform: none; transform: none; } 82 | 100% { transform: translate(-32px, 0); transform: translate(-32px, 0); } 83 | } 84 | -------------------------------------------------------------------------------- /themes/black/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(0, 0, 0, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/black/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #000000; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #000000; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #000000; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #000000; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/black/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(0, 0, 0, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/black/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #000000 transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #000000 transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/black/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #000000; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #000000; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/black/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #000000; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/black/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(0, 0, 0, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/black/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #000000; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #000000, 0 0 5px #000000; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #000000; 49 | border-left-color: #000000; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/black/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #000000; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/black/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #000000; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #000000, inset 0 -1px #000000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #000000, inset 0 -1px #000000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #000000, inset 0 -1px #000000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #000000, inset 0 -1px #000000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/black/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #000000; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(34, 153, 221, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #2299dd; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #2299dd; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #2299dd; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #2299dd; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(34, 153, 221, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #2299dd transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #2299dd transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #2299dd; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #2299dd; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/blue/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #2299dd; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(34, 153, 221, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #2299dd; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #2299dd, 0 0 5px #2299dd; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #2299dd; 49 | border-left-color: #2299dd; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #2299dd; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #0087E1; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/blue/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #2299dd; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/green/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(34, 223, 128, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/green/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #22df80; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #22df80; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #22df80; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #22df80; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/green/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(34, 223, 128, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/green/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #22df80 transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #22df80 transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/green/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #22df80; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #22df80; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/green/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #22df80; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/green/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(34, 223, 128, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/green/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #22df80; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #22df80, 0 0 5px #22df80; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #22df80; 49 | border-left-color: #22df80; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/green/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #22df80; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/green/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #00E466; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #009140, inset 0 -1px #009140, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #009140, inset 0 -1px #009140, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #009140, inset 0 -1px #009140, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #009140, inset 0 -1px #009140, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/green/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #22df80; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(235, 122, 85, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #eb7a55; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #eb7a55; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #eb7a55; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #eb7a55; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(235, 122, 85, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #eb7a55 transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #eb7a55 transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #eb7a55; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #eb7a55; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/orange/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #eb7a55; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(235, 122, 85, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #eb7a55; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #eb7a55, 0 0 5px #eb7a55; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #eb7a55; 49 | border-left-color: #eb7a55; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #eb7a55; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #FF2C00; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #BF1B00, inset 0 -1px #BF1B00, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #BF1B00, inset 0 -1px #BF1B00, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #BF1B00, inset 0 -1px #BF1B00, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #BF1B00, inset 0 -1px #BF1B00, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/orange/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #eb7a55; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(233, 15, 146, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #e90f92; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #e90f92; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #e90f92; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #e90f92; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(233, 15, 146, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #e90f92 transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #e90f92 transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #e90f92; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #e90f92; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/pink/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #e90f92; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(233, 15, 146, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #e90f92; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #e90f92; 49 | border-left-color: #e90f92; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #e90f92; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #F40080; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #9F0053, inset 0 -1px #9F0053, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #9F0053, inset 0 -1px #9F0053, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #9F0053, inset 0 -1px #9F0053, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #9F0053, inset 0 -1px #9F0053, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/pink/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #e90f92; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(124, 96, 224, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #7c60e0; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #7c60e0; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #7c60e0; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #7c60e0; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(124, 96, 224, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #7c60e0 transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #7c60e0 transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #7c60e0; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #7c60e0; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/purple/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #7c60e0; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(124, 96, 224, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #7c60e0; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #7c60e0, 0 0 5px #7c60e0; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #7c60e0; 49 | border-left-color: #7c60e0; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #7c60e0; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #3000FF; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #1D00AF, inset 0 -1px #1D00AF, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #1D00AF, inset 0 -1px #1D00AF, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #1D00AF, inset 0 -1px #1D00AF, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #1D00AF, inset 0 -1px #1D00AF, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/purple/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #7c60e0; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/red/pace-theme-barber-shop.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #ee3148; 26 | position: fixed; 27 | top: 0; 28 | bottom: 0; 29 | right: 100%; 30 | width: 100%; 31 | overflow: hidden; 32 | } 33 | 34 | .pace .pace-activity { 35 | position: fixed; 36 | top: 0; 37 | right: -32px; 38 | bottom: 0; 39 | left: 0; 40 | 41 | -webkit-transform: translate3d(0, 0, 0); 42 | -moz-transform: translate3d(0, 0, 0); 43 | -ms-transform: translate3d(0, 0, 0); 44 | -o-transform: translate3d(0, 0, 0); 45 | transform: translate3d(0, 0, 0); 46 | 47 | background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); 48 | background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 49 | background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 50 | background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 51 | background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 52 | -webkit-background-size: 32px 32px; 53 | -moz-background-size: 32px 32px; 54 | -o-background-size: 32px 32px; 55 | background-size: 32px 32px; 56 | 57 | -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite; 58 | -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite; 59 | -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite; 60 | -o-animation: pace-theme-barber-shop-motion 500ms linear infinite; 61 | animation: pace-theme-barber-shop-motion 500ms linear infinite; 62 | } 63 | 64 | @-webkit-keyframes pace-theme-barber-shop-motion { 65 | 0% { -webkit-transform: none; transform: none; } 66 | 100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); } 67 | } 68 | @-moz-keyframes pace-theme-barber-shop-motion { 69 | 0% { -moz-transform: none; transform: none; } 70 | 100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); } 71 | } 72 | @-o-keyframes pace-theme-barber-shop-motion { 73 | 0% { -o-transform: none; transform: none; } 74 | 100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); } 75 | } 76 | @-ms-keyframes pace-theme-barber-shop-motion { 77 | 0% { -ms-transform: none; transform: none; } 78 | 100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); } 79 | } 80 | @keyframes pace-theme-barber-shop-motion { 81 | 0% { transform: none; transform: none; } 82 | 100% { transform: translate(-32px, 0); transform: translate(-32px, 0); } 83 | } 84 | -------------------------------------------------------------------------------- /themes/red/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(238, 49, 72, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/red/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #ee3148; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #ee3148; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #ee3148; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #ee3148; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/red/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(238, 49, 72, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/red/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #ee3148 transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #ee3148 transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/red/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #ee3148; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #ee3148; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/red/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #ee3148; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/red/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(238, 49, 72, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/red/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #ee3148; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #ee3148, 0 0 5px #ee3148; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #ee3148; 49 | border-left-color: #ee3148; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/red/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #ee3148; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/red/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #FF0000; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #AF0000, inset 0 -1px #AF0000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #AF0000, inset 0 -1px #AF0000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #AF0000, inset 0 -1px #AF0000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #AF0000, inset 0 -1px #AF0000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/red/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #ee3148; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(214, 214, 214, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #d6d6d6; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #d6d6d6; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #d6d6d6; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #d6d6d6; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(214, 214, 214, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #d6d6d6 transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #d6d6d6 transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #d6d6d6; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #d6d6d6; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/silver/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #d6d6d6; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(214, 214, 214, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #d6d6d6; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #d6d6d6, 0 0 5px #d6d6d6; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #d6d6d6; 49 | border-left-color: #d6d6d6; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #d6d6d6; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #ABABAB; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #6B6B6B, inset 0 -1px #6B6B6B, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #6B6B6B, inset 0 -1px #6B6B6B, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #6B6B6B, inset 0 -1px #6B6B6B, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #6B6B6B, inset 0 -1px #6B6B6B, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/silver/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #d6d6d6; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/white/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(255, 255, 255, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/white/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #ffffff; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #ffffff; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #ffffff; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #ffffff; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/white/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(255, 255, 255, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/white/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #ffffff transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #ffffff transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/white/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #ffffff; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #ffffff; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/white/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #ffffff; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/white/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(255, 255, 255, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/white/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #ffffff; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #ffffff, 0 0 5px #ffffff; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #ffffff; 49 | border-left-color: #ffffff; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/white/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #ffffff; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/white/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #CCCCCC; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/white/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #ffffff; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-big-counter.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace.pace-inactive .pace-progress { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 0; 20 | height: 5rem; 21 | width: 5rem; 22 | 23 | -webkit-transform: translate3d(0, 0, 0) !important; 24 | -ms-transform: translate3d(0, 0, 0) !important; 25 | transform: translate3d(0, 0, 0) !important; 26 | } 27 | 28 | .pace .pace-progress:after { 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | right: .5rem; 33 | content: attr(data-progress-text); 34 | font-family: "Helvetica Neue", sans-serif; 35 | font-weight: 100; 36 | font-size: 5rem; 37 | line-height: 1; 38 | text-align: right; 39 | color: rgba(252, 210, 90, 0.19999999999999996); 40 | } 41 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-center-atom.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace.pace-inactive { 3 | display: none; 4 | } 5 | 6 | .pace { 7 | -webkit-pointer-events: none; 8 | pointer-events: none; 9 | 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | user-select: none; 13 | 14 | z-index: 2000; 15 | position: fixed; 16 | height: 60px; 17 | width: 100px; 18 | margin: auto; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | } 24 | 25 | .pace .pace-progress { 26 | z-index: 2000; 27 | position: absolute; 28 | height: 60px; 29 | width: 100px; 30 | 31 | -webkit-transform: translate3d(0, 0, 0) !important; 32 | -ms-transform: translate3d(0, 0, 0) !important; 33 | transform: translate3d(0, 0, 0) !important; 34 | } 35 | 36 | .pace .pace-progress:before { 37 | content: attr(data-progress-text); 38 | text-align: center; 39 | color: #fff; 40 | background: #fcd25a; 41 | border-radius: 50%; 42 | font-family: "Helvetica Neue", sans-serif; 43 | font-size: 14px; 44 | font-weight: 100; 45 | line-height: 1; 46 | padding: 20% 0 7px; 47 | width: 50%; 48 | height: 40%; 49 | margin: 10px 0 0 30px; 50 | display: block; 51 | z-index: 999; 52 | position: absolute; 53 | } 54 | 55 | .pace .pace-activity { 56 | font-size: 15px; 57 | line-height: 1; 58 | z-index: 2000; 59 | position: absolute; 60 | height: 60px; 61 | width: 100px; 62 | 63 | display: block; 64 | -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; 65 | -moz-animation: pace-theme-center-atom-spin 2s linear infinite; 66 | -o-animation: pace-theme-center-atom-spin 2s linear infinite; 67 | animation: pace-theme-center-atom-spin 2s linear infinite; 68 | } 69 | 70 | .pace .pace-activity { 71 | border-radius: 50%; 72 | border: 5px solid #fcd25a; 73 | content: ' '; 74 | display: block; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | height: 60px; 79 | width: 100px; 80 | } 81 | 82 | .pace .pace-activity:after { 83 | border-radius: 50%; 84 | border: 5px solid #fcd25a; 85 | content: ' '; 86 | display: block; 87 | position: absolute; 88 | top: -5px; 89 | left: -5px; 90 | height: 60px; 91 | width: 100px; 92 | 93 | -webkit-transform: rotate(60deg); 94 | -moz-transform: rotate(60deg); 95 | -o-transform: rotate(60deg); 96 | transform: rotate(60deg); 97 | } 98 | 99 | .pace .pace-activity:before { 100 | border-radius: 50%; 101 | border: 5px solid #fcd25a; 102 | content: ' '; 103 | display: block; 104 | position: absolute; 105 | top: -5px; 106 | left: -5px; 107 | height: 60px; 108 | width: 100px; 109 | 110 | -webkit-transform: rotate(120deg); 111 | -moz-transform: rotate(120deg); 112 | -o-transform: rotate(120deg); 113 | transform: rotate(120deg); 114 | } 115 | 116 | @-webkit-keyframes pace-theme-center-atom-spin { 117 | 0% { -webkit-transform: rotate(0deg) } 118 | 100% { -webkit-transform: rotate(359deg) } 119 | } 120 | @-moz-keyframes pace-theme-center-atom-spin { 121 | 0% { -moz-transform: rotate(0deg) } 122 | 100% { -moz-transform: rotate(359deg) } 123 | } 124 | @-o-keyframes pace-theme-center-atom-spin { 125 | 0% { -o-transform: rotate(0deg) } 126 | 100% { -o-transform: rotate(359deg) } 127 | } 128 | @keyframes pace-theme-center-atom-spin { 129 | 0% { transform: rotate(0deg) } 130 | 100% { transform: rotate(359deg) } 131 | } 132 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-center-circle.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | -webkit-perspective: 12rem; 11 | -moz-perspective: 12rem; 12 | -ms-perspective: 12rem; 13 | -o-perspective: 12rem; 14 | perspective: 12rem; 15 | 16 | z-index: 2000; 17 | position: fixed; 18 | height: 6rem; 19 | width: 6rem; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | } 26 | 27 | .pace.pace-inactive .pace-progress { 28 | display: none; 29 | } 30 | 31 | .pace .pace-progress { 32 | position: fixed; 33 | z-index: 2000; 34 | display: block; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | height: 6rem; 39 | width: 6rem !important; 40 | line-height: 6rem; 41 | font-size: 2rem; 42 | border-radius: 50%; 43 | background: rgba(252, 210, 90, 0.8); 44 | color: #fff; 45 | font-family: "Helvetica Neue", sans-serif; 46 | font-weight: 100; 47 | text-align: center; 48 | 49 | -webkit-animation: pace-theme-center-circle-spin linear infinite 2s; 50 | -moz-animation: pace-theme-center-circle-spin linear infinite 2s; 51 | -ms-animation: pace-theme-center-circle-spin linear infinite 2s; 52 | -o-animation: pace-theme-center-circle-spin linear infinite 2s; 53 | animation: pace-theme-center-circle-spin linear infinite 2s; 54 | 55 | -webkit-transform-style: preserve-3d; 56 | -moz-transform-style: preserve-3d; 57 | -ms-transform-style: preserve-3d; 58 | -o-transform-style: preserve-3d; 59 | transform-style: preserve-3d; 60 | } 61 | 62 | .pace .pace-progress:after { 63 | content: attr(data-progress-text); 64 | display: block; 65 | } 66 | 67 | @-webkit-keyframes pace-theme-center-circle-spin { 68 | from { -webkit-transform: rotateY(0deg) } 69 | to { -webkit-transform: rotateY(360deg) } 70 | } 71 | 72 | @-moz-keyframes pace-theme-center-circle-spin { 73 | from { -moz-transform: rotateY(0deg) } 74 | to { -moz-transform: rotateY(360deg) } 75 | } 76 | 77 | @-ms-keyframes pace-theme-center-circle-spin { 78 | from { -ms-transform: rotateY(0deg) } 79 | to { -ms-transform: rotateY(360deg) } 80 | } 81 | 82 | @-o-keyframes pace-theme-center-circle-spin { 83 | from { -o-transform: rotateY(0deg) } 84 | to { -o-transform: rotateY(360deg) } 85 | } 86 | 87 | @keyframes pace-theme-center-circle-spin { 88 | from { transform: rotateY(0deg) } 89 | to { transform: rotateY(360deg) } 90 | } 91 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-center-radar.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | height: 90px; 13 | width: 90px; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | } 20 | 21 | .pace.pace-inactive .pace-activity { 22 | display: none; 23 | } 24 | 25 | .pace .pace-activity { 26 | position: fixed; 27 | z-index: 2000; 28 | display: block; 29 | position: absolute; 30 | left: -30px; 31 | top: -30px; 32 | height: 90px; 33 | width: 90px; 34 | display: block; 35 | border-width: 30px; 36 | border-style: double; 37 | border-color: #fcd25a transparent transparent; 38 | border-radius: 50%; 39 | 40 | -webkit-box-sizing: content-box; 41 | -moz-box-sizing: content-box; 42 | box-sizing: content-box; 43 | 44 | -webkit-animation: spin 1s linear infinite; 45 | -moz-animation: spin 1s linear infinite; 46 | -o-animation: spin 1s linear infinite; 47 | animation: spin 1s linear infinite; 48 | } 49 | 50 | .pace .pace-activity:before { 51 | content: ' '; 52 | position: absolute; 53 | top: 10px; 54 | left: 10px; 55 | height: 50px; 56 | width: 50px; 57 | display: block; 58 | border-width: 10px; 59 | border-style: solid; 60 | border-color: #fcd25a transparent transparent; 61 | border-radius: 50%; 62 | 63 | -webkit-box-sizing: content-box; 64 | -moz-box-sizing: content-box; 65 | box-sizing: content-box; 66 | } 67 | 68 | @-webkit-keyframes spin { 69 | 100% { -webkit-transform: rotate(359deg); } 70 | } 71 | 72 | @-moz-keyframes spin { 73 | 100% { -moz-transform: rotate(359deg); } 74 | } 75 | 76 | @-o-keyframes spin { 77 | 100% { -moz-transform: rotate(359deg); } 78 | } 79 | 80 | @keyframes spin { 81 | 100% { transform: rotate(359deg); } 82 | } 83 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-center-simple.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | z-index: 2000; 11 | position: fixed; 12 | margin: auto; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | height: 5px; 18 | width: 200px; 19 | background: #fff; 20 | border: 1px solid #fcd25a; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | .pace .pace-progress { 26 | -webkit-box-sizing: border-box; 27 | -moz-box-sizing: border-box; 28 | -ms-box-sizing: border-box; 29 | -o-box-sizing: border-box; 30 | box-sizing: border-box; 31 | 32 | -webkit-transform: translate3d(0, 0, 0); 33 | -moz-transform: translate3d(0, 0, 0); 34 | -ms-transform: translate3d(0, 0, 0); 35 | -o-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | 38 | max-width: 200px; 39 | position: fixed; 40 | z-index: 2000; 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | right: 100%; 45 | height: 100%; 46 | width: 100%; 47 | background: #fcd25a; 48 | } 49 | 50 | .pace.pace-inactive { 51 | display: none; 52 | } -------------------------------------------------------------------------------- /themes/yellow/pace-theme-corner-indicator.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace .pace-activity { 12 | display: block; 13 | position: fixed; 14 | z-index: 2000; 15 | top: 0; 16 | right: 0; 17 | width: 300px; 18 | height: 300px; 19 | background: #fcd25a; 20 | -webkit-transition: -webkit-transform 0.3s; 21 | transition: transform 0.3s; 22 | -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 23 | transform: translateX(100%) translateY(-100%) rotate(45deg); 24 | pointer-events: none; 25 | } 26 | 27 | .pace.pace-active .pace-activity { 28 | -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 29 | transform: translateX(50%) translateY(-50%) rotate(45deg); 30 | } 31 | 32 | .pace .pace-activity::before, 33 | .pace .pace-activity::after { 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | position: absolute; 37 | bottom: 30px; 38 | left: 50%; 39 | display: block; 40 | border: 5px solid #fff; 41 | border-radius: 50%; 42 | content: ''; 43 | } 44 | 45 | .pace .pace-activity::before { 46 | margin-left: -40px; 47 | width: 80px; 48 | height: 80px; 49 | border-right-color: rgba(0, 0, 0, .2); 50 | border-left-color: rgba(0, 0, 0, .2); 51 | -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite; 52 | animation: pace-theme-corner-indicator-spin 3s linear infinite; 53 | } 54 | 55 | .pace .pace-activity::after { 56 | bottom: 50px; 57 | margin-left: -20px; 58 | width: 40px; 59 | height: 40px; 60 | border-top-color: rgba(0, 0, 0, .2); 61 | border-bottom-color: rgba(0, 0, 0, .2); 62 | -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite; 63 | animation: pace-theme-corner-indicator-spin 1s linear infinite; 64 | } 65 | 66 | @-webkit-keyframes pace-theme-corner-indicator-spin { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(359deg); } 69 | } 70 | @keyframes pace-theme-corner-indicator-spin { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(359deg); } 73 | } 74 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-fill-left.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background-color: rgba(252, 210, 90, 0.19999999999999996); 16 | position: fixed; 17 | z-index: -1; 18 | top: 0; 19 | right: 100%; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-flash.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | -webkit-user-select: none; 6 | -moz-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | .pace-inactive { 11 | display: none; 12 | } 13 | 14 | .pace .pace-progress { 15 | background: #fcd25a; 16 | position: fixed; 17 | z-index: 2000; 18 | top: 0; 19 | right: 100%; 20 | width: 100%; 21 | height: 2px; 22 | } 23 | 24 | .pace .pace-progress-inner { 25 | display: block; 26 | position: absolute; 27 | right: 0px; 28 | width: 100px; 29 | height: 100%; 30 | box-shadow: 0 0 10px #fcd25a, 0 0 5px #fcd25a; 31 | opacity: 1.0; 32 | -webkit-transform: rotate(3deg) translate(0px, -4px); 33 | -moz-transform: rotate(3deg) translate(0px, -4px); 34 | -ms-transform: rotate(3deg) translate(0px, -4px); 35 | -o-transform: rotate(3deg) translate(0px, -4px); 36 | transform: rotate(3deg) translate(0px, -4px); 37 | } 38 | 39 | .pace .pace-activity { 40 | display: block; 41 | position: fixed; 42 | z-index: 2000; 43 | top: 15px; 44 | right: 15px; 45 | width: 14px; 46 | height: 14px; 47 | border: solid 2px transparent; 48 | border-top-color: #fcd25a; 49 | border-left-color: #fcd25a; 50 | border-radius: 10px; 51 | -webkit-animation: pace-spinner 400ms linear infinite; 52 | -moz-animation: pace-spinner 400ms linear infinite; 53 | -ms-animation: pace-spinner 400ms linear infinite; 54 | -o-animation: pace-spinner 400ms linear infinite; 55 | animation: pace-spinner 400ms linear infinite; 56 | } 57 | 58 | @-webkit-keyframes pace-spinner { 59 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 61 | } 62 | @-moz-keyframes pace-spinner { 63 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 64 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 65 | } 66 | @-o-keyframes pace-spinner { 67 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 68 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 69 | } 70 | @-ms-keyframes pace-spinner { 71 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 72 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 73 | } 74 | @keyframes pace-spinner { 75 | 0% { transform: rotate(0deg); transform: rotate(0deg); } 76 | 100% { transform: rotate(360deg); transform: rotate(360deg); } 77 | } 78 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-flat-top.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | 15 | -webkit-transform: translate3d(0, -50px, 0); 16 | -ms-transform: translate3d(0, -50px, 0); 17 | transform: translate3d(0, -50px, 0); 18 | 19 | -webkit-transition: -webkit-transform .5s ease-out; 20 | -ms-transition: -webkit-transform .5s ease-out; 21 | transition: transform .5s ease-out; 22 | } 23 | 24 | .pace.pace-active { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | -ms-transform: translate3d(0, 0, 0); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | .pace .pace-progress { 31 | display: block; 32 | position: fixed; 33 | z-index: 2000; 34 | top: 0; 35 | right: 100%; 36 | width: 100%; 37 | height: 10px; 38 | background: #fcd25a; 39 | 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-mac-osx.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | 10 | overflow: hidden; 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: 2000; 15 | width: 100%; 16 | height: 12px; 17 | background: #fff; 18 | } 19 | 20 | .pace-inactive { 21 | display: none; 22 | } 23 | 24 | .pace .pace-progress { 25 | background-color: #FFE000; 26 | position: fixed; 27 | top: 0; 28 | right: 100%; 29 | width: 100%; 30 | height: 12px; 31 | overflow: hidden; 32 | 33 | -webkit-border-radius: 0 0 4px 0; 34 | -moz-border-radius: 0 0 4px 0; 35 | -o-border-radius: 0 0 4px 0; 36 | border-radius: 0 0 4px 0; 37 | 38 | -webkit-box-shadow: inset -1px 0 #E49900, inset 0 -1px #E49900, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 39 | -moz-box-shadow: inset -1px 0 #E49900, inset 0 -1px #E49900, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 40 | -o-box-shadow: inset -1px 0 #E49900, inset 0 -1px #E49900, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 41 | box-shadow: inset -1px 0 #E49900, inset 0 -1px #E49900, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); 42 | } 43 | 44 | .pace .pace-activity { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: -28px; 49 | bottom: 0; 50 | 51 | -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 52 | -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 53 | -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 54 | background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%); 55 | 56 | -webkit-background-size: 28px 100%; 57 | -moz-background-size: 28px 100%; 58 | -o-background-size: 28px 100%; 59 | background-size: 28px 100%; 60 | 61 | -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite; 62 | -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite; 63 | -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite; 64 | -o-animation: pace-theme-mac-osx-motion 500ms linear infinite; 65 | animation: pace-theme-mac-osx-motion 500ms linear infinite; 66 | } 67 | 68 | @-webkit-keyframes pace-theme-mac-osx-motion { 69 | 0% { -webkit-transform: none; transform: none; } 70 | 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); } 71 | } 72 | @-moz-keyframes pace-theme-mac-osx-motion { 73 | 0% { -moz-transform: none; transform: none; } 74 | 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); } 75 | } 76 | @-o-keyframes pace-theme-mac-osx-motion { 77 | 0% { -o-transform: none; transform: none; } 78 | 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); } 79 | } 80 | @-ms-keyframes pace-theme-mac-osx-motion { 81 | 0% { -ms-transform: none; transform: none; } 82 | 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); } 83 | } 84 | @keyframes pace-theme-mac-osx-motion { 85 | 0% { transform: none; transform: none; } 86 | 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); } 87 | } 88 | -------------------------------------------------------------------------------- /themes/yellow/pace-theme-minimal.css: -------------------------------------------------------------------------------- 1 | /* This is a compiled file, you should be editing the file in the templates directory */ 2 | .pace { 3 | -webkit-pointer-events: none; 4 | pointer-events: none; 5 | 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | user-select: none; 9 | } 10 | 11 | .pace-inactive { 12 | display: none; 13 | } 14 | 15 | .pace .pace-progress { 16 | background: #fcd25a; 17 | position: fixed; 18 | z-index: 2000; 19 | top: 0; 20 | right: 100%; 21 | width: 100%; 22 | height: 2px; 23 | } 24 | --------------------------------------------------------------------------------