From 499afaf32a11650f6fc400df6bd3ad1efd1c51a7 Mon Sep 17 00:00:00 2001 From: Ruslan Lekhman Date: Wed, 4 Mar 2026 16:41:56 -0700 Subject: [PATCH] feat: use css custom properties for theme color customization Replace hardcoded color values in all compiled theme files with CSS custom properties using `var(--pace-color, )`. This enables color customization via CSS: ```css :root { --pace-color: #ff6600; } ``` Benefits: - No breaking changes - default colors remain identical via fallback - Works when included as static CSS in frameworks - Eliminates the need to copy theme files locally for color changes - Templates (`*.tmpl.css`) are unchanged for JS runtime customization Signed-off-by: Ruslan Lekhman --- themes/black/pace-theme-barber-shop.css | 2 +- themes/black/pace-theme-big-counter.css | 2 +- themes/black/pace-theme-bounce.css | 2 +- themes/black/pace-theme-center-atom.css | 8 ++++---- themes/black/pace-theme-center-circle.css | 2 +- themes/black/pace-theme-center-radar.css | 4 ++-- themes/black/pace-theme-center-simple.css | 4 ++-- themes/black/pace-theme-corner-indicator.css | 2 +- themes/black/pace-theme-fill-left.css | 2 +- themes/black/pace-theme-flash.css | 8 ++++---- themes/black/pace-theme-flat-top.css | 2 +- themes/black/pace-theme-loading-bar.css | 6 +++--- themes/black/pace-theme-mac-osx.css | 10 +++++----- themes/black/pace-theme-material.css | 2 +- themes/black/pace-theme-minimal.css | 2 +- themes/blue/pace-theme-barber-shop.css | 2 +- themes/blue/pace-theme-big-counter.css | 2 +- themes/blue/pace-theme-bounce.css | 2 +- themes/blue/pace-theme-center-atom.css | 8 ++++---- themes/blue/pace-theme-center-circle.css | 2 +- themes/blue/pace-theme-center-radar.css | 4 ++-- themes/blue/pace-theme-center-simple.css | 4 ++-- themes/blue/pace-theme-corner-indicator.css | 2 +- themes/blue/pace-theme-fill-left.css | 2 +- themes/blue/pace-theme-flash.css | 8 ++++---- themes/blue/pace-theme-flat-top.css | 2 +- themes/blue/pace-theme-loading-bar.css | 6 +++--- themes/blue/pace-theme-mac-osx.css | 10 +++++----- themes/blue/pace-theme-material.css | 2 +- themes/blue/pace-theme-minimal.css | 2 +- themes/green/pace-theme-barber-shop.css | 2 +- themes/green/pace-theme-big-counter.css | 2 +- themes/green/pace-theme-bounce.css | 2 +- themes/green/pace-theme-center-atom.css | 8 ++++---- themes/green/pace-theme-center-circle.css | 2 +- themes/green/pace-theme-center-radar.css | 4 ++-- themes/green/pace-theme-center-simple.css | 4 ++-- themes/green/pace-theme-corner-indicator.css | 2 +- themes/green/pace-theme-fill-left.css | 2 +- themes/green/pace-theme-flash.css | 8 ++++---- themes/green/pace-theme-flat-top.css | 2 +- themes/green/pace-theme-loading-bar.css | 6 +++--- themes/green/pace-theme-mac-osx.css | 10 +++++----- themes/green/pace-theme-material.css | 2 +- themes/green/pace-theme-minimal.css | 2 +- themes/orange/pace-theme-barber-shop.css | 2 +- themes/orange/pace-theme-big-counter.css | 2 +- themes/orange/pace-theme-bounce.css | 2 +- themes/orange/pace-theme-center-atom.css | 8 ++++---- themes/orange/pace-theme-center-circle.css | 2 +- themes/orange/pace-theme-center-radar.css | 4 ++-- themes/orange/pace-theme-center-simple.css | 4 ++-- themes/orange/pace-theme-corner-indicator.css | 2 +- themes/orange/pace-theme-fill-left.css | 2 +- themes/orange/pace-theme-flash.css | 8 ++++---- themes/orange/pace-theme-flat-top.css | 2 +- themes/orange/pace-theme-loading-bar.css | 6 +++--- themes/orange/pace-theme-mac-osx.css | 10 +++++----- themes/orange/pace-theme-material.css | 2 +- themes/orange/pace-theme-minimal.css | 2 +- themes/pink/pace-theme-barber-shop.css | 2 +- themes/pink/pace-theme-big-counter.css | 2 +- themes/pink/pace-theme-bounce.css | 2 +- themes/pink/pace-theme-center-atom.css | 8 ++++---- themes/pink/pace-theme-center-circle.css | 2 +- themes/pink/pace-theme-center-radar.css | 4 ++-- themes/pink/pace-theme-center-simple.css | 4 ++-- themes/pink/pace-theme-corner-indicator.css | 2 +- themes/pink/pace-theme-fill-left.css | 2 +- themes/pink/pace-theme-flash.css | 8 ++++---- themes/pink/pace-theme-flat-top.css | 2 +- themes/pink/pace-theme-loading-bar.css | 6 +++--- themes/pink/pace-theme-mac-osx.css | 10 +++++----- themes/pink/pace-theme-material.css | 2 +- themes/pink/pace-theme-minimal.css | 2 +- themes/purple/pace-theme-barber-shop.css | 2 +- themes/purple/pace-theme-big-counter.css | 2 +- themes/purple/pace-theme-bounce.css | 2 +- themes/purple/pace-theme-center-atom.css | 8 ++++---- themes/purple/pace-theme-center-circle.css | 2 +- themes/purple/pace-theme-center-radar.css | 4 ++-- themes/purple/pace-theme-center-simple.css | 4 ++-- themes/purple/pace-theme-corner-indicator.css | 2 +- themes/purple/pace-theme-fill-left.css | 2 +- themes/purple/pace-theme-flash.css | 8 ++++---- themes/purple/pace-theme-flat-top.css | 2 +- themes/purple/pace-theme-loading-bar.css | 6 +++--- themes/purple/pace-theme-mac-osx.css | 10 +++++----- themes/purple/pace-theme-material.css | 2 +- themes/purple/pace-theme-minimal.css | 2 +- themes/red/pace-theme-barber-shop.css | 2 +- themes/red/pace-theme-big-counter.css | 2 +- themes/red/pace-theme-bounce.css | 2 +- themes/red/pace-theme-center-atom.css | 8 ++++---- themes/red/pace-theme-center-circle.css | 2 +- themes/red/pace-theme-center-radar.css | 4 ++-- themes/red/pace-theme-center-simple.css | 4 ++-- themes/red/pace-theme-corner-indicator.css | 2 +- themes/red/pace-theme-fill-left.css | 2 +- themes/red/pace-theme-flash.css | 8 ++++---- themes/red/pace-theme-flat-top.css | 2 +- themes/red/pace-theme-loading-bar.css | 6 +++--- themes/red/pace-theme-mac-osx.css | 10 +++++----- themes/red/pace-theme-material.css | 2 +- themes/red/pace-theme-minimal.css | 2 +- themes/silver/pace-theme-barber-shop.css | 2 +- themes/silver/pace-theme-big-counter.css | 2 +- themes/silver/pace-theme-bounce.css | 2 +- themes/silver/pace-theme-center-atom.css | 8 ++++---- themes/silver/pace-theme-center-circle.css | 2 +- themes/silver/pace-theme-center-radar.css | 4 ++-- themes/silver/pace-theme-center-simple.css | 4 ++-- themes/silver/pace-theme-corner-indicator.css | 2 +- themes/silver/pace-theme-fill-left.css | 2 +- themes/silver/pace-theme-flash.css | 8 ++++---- themes/silver/pace-theme-flat-top.css | 2 +- themes/silver/pace-theme-loading-bar.css | 6 +++--- themes/silver/pace-theme-mac-osx.css | 10 +++++----- themes/silver/pace-theme-material.css | 2 +- themes/silver/pace-theme-minimal.css | 2 +- themes/white/pace-theme-barber-shop.css | 2 +- themes/white/pace-theme-big-counter.css | 2 +- themes/white/pace-theme-bounce.css | 2 +- themes/white/pace-theme-center-atom.css | 8 ++++---- themes/white/pace-theme-center-circle.css | 2 +- themes/white/pace-theme-center-radar.css | 4 ++-- themes/white/pace-theme-center-simple.css | 4 ++-- themes/white/pace-theme-corner-indicator.css | 2 +- themes/white/pace-theme-fill-left.css | 2 +- themes/white/pace-theme-flash.css | 8 ++++---- themes/white/pace-theme-flat-top.css | 2 +- themes/white/pace-theme-loading-bar.css | 6 +++--- themes/white/pace-theme-mac-osx.css | 10 +++++----- themes/white/pace-theme-material.css | 2 +- themes/white/pace-theme-minimal.css | 2 +- themes/yellow/pace-theme-barber-shop.css | 2 +- themes/yellow/pace-theme-big-counter.css | 2 +- themes/yellow/pace-theme-bounce.css | 2 +- themes/yellow/pace-theme-center-atom.css | 8 ++++---- themes/yellow/pace-theme-center-circle.css | 2 +- themes/yellow/pace-theme-center-radar.css | 4 ++-- themes/yellow/pace-theme-center-simple.css | 4 ++-- themes/yellow/pace-theme-corner-indicator.css | 2 +- themes/yellow/pace-theme-fill-left.css | 2 +- themes/yellow/pace-theme-flash.css | 8 ++++---- themes/yellow/pace-theme-flat-top.css | 2 +- themes/yellow/pace-theme-loading-bar.css | 6 +++--- themes/yellow/pace-theme-mac-osx.css | 10 +++++----- themes/yellow/pace-theme-material.css | 2 +- themes/yellow/pace-theme-minimal.css | 2 +- 150 files changed, 290 insertions(+), 290 deletions(-) diff --git a/themes/black/pace-theme-barber-shop.css b/themes/black/pace-theme-barber-shop.css index 895611b6..eb0f5057 100644 --- a/themes/black/pace-theme-barber-shop.css +++ b/themes/black/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #000000; + background-color: var(--pace-color, #000000); position: fixed; top: 0; bottom: 0; diff --git a/themes/black/pace-theme-big-counter.css b/themes/black/pace-theme-big-counter.css index 99d53ace..fae33eb0 100644 --- a/themes/black/pace-theme-big-counter.css +++ b/themes/black/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(0, 0, 0, 0.19999999999999996); + color: var(--pace-color, rgba(0, 0, 0, 0.19999999999999996)); } diff --git a/themes/black/pace-theme-bounce.css b/themes/black/pace-theme-bounce.css index 6ef4986e..c16ff37b 100644 --- a/themes/black/pace-theme-bounce.css +++ b/themes/black/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #000000; + background: var(--pace-color, #000000); position: absolute; top: 0; z-index: 1911; diff --git a/themes/black/pace-theme-center-atom.css b/themes/black/pace-theme-center-atom.css index 3d8f4e13..65e1b3d1 100644 --- a/themes/black/pace-theme-center-atom.css +++ b/themes/black/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #000000; + background: var(--pace-color, #000000); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #000000; + border: 5px solid var(--pace-color, #000000); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #000000; + border: 5px solid var(--pace-color, #000000); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #000000; + border: 5px solid var(--pace-color, #000000); content: ' '; display: block; position: absolute; diff --git a/themes/black/pace-theme-center-circle.css b/themes/black/pace-theme-center-circle.css index 2721f9af..aa8b7a76 100644 --- a/themes/black/pace-theme-center-circle.css +++ b/themes/black/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(0, 0, 0, 0.8); + background: var(--pace-color, rgba(0, 0, 0, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/black/pace-theme-center-radar.css b/themes/black/pace-theme-center-radar.css index 62b15e70..8d87b496 100644 --- a/themes/black/pace-theme-center-radar.css +++ b/themes/black/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #000000 transparent transparent; + border-color: var(--pace-color, #000000) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #000000 transparent transparent; + border-color: var(--pace-color, #000000) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/black/pace-theme-center-simple.css b/themes/black/pace-theme-center-simple.css index e7e368e7..56aa1b6e 100644 --- a/themes/black/pace-theme-center-simple.css +++ b/themes/black/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #000000; + border: 1px solid var(--pace-color, #000000); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #000000; + background: var(--pace-color, #000000); } .pace.pace-inactive { diff --git a/themes/black/pace-theme-corner-indicator.css b/themes/black/pace-theme-corner-indicator.css index 98c7cd68..7361ba71 100644 --- a/themes/black/pace-theme-corner-indicator.css +++ b/themes/black/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #000000; + background: var(--pace-color, #000000); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/black/pace-theme-fill-left.css b/themes/black/pace-theme-fill-left.css index 474ce65c..77ad127f 100644 --- a/themes/black/pace-theme-fill-left.css +++ b/themes/black/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(0, 0, 0, 0.19999999999999996); + background-color: var(--pace-color, rgba(0, 0, 0, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/black/pace-theme-flash.css b/themes/black/pace-theme-flash.css index 089ded0e..67294889 100644 --- a/themes/black/pace-theme-flash.css +++ b/themes/black/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #000000; + background: var(--pace-color, #000000); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #000000, 0 0 5px #000000; + box-shadow: 0 0 10px var(--pace-color, #000000), 0 0 5px var(--pace-color, #000000); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #000000; - border-left-color: #000000; + border-top-color: var(--pace-color, #000000); + border-left-color: var(--pace-color, #000000); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/black/pace-theme-flat-top.css b/themes/black/pace-theme-flat-top.css index 5d8d1109..f32ce0ea 100644 --- a/themes/black/pace-theme-flat-top.css +++ b/themes/black/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #000000; + background: var(--pace-color, #000000); pointer-events: none; } diff --git a/themes/black/pace-theme-loading-bar.css b/themes/black/pace-theme-loading-bar.css index 1b942029..038b0313 100644 --- a/themes/black/pace-theme-loading-bar.css +++ b/themes/black/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #000000; - color: #000000; + background: var(--pace-color, #000000); + color: var(--pace-color, #000000); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #000000, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #000000), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/black/pace-theme-mac-osx.css b/themes/black/pace-theme-mac-osx.css index f096d2cd..22e12fc8 100644 --- a/themes/black/pace-theme-mac-osx.css +++ b/themes/black/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #000000; + background-color: var(--pace-color, #000000); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #000000), inset 0 -1px var(--pace-color, #000000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #000000), inset 0 -1px var(--pace-color, #000000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #000000), inset 0 -1px var(--pace-color, #000000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #000000), inset 0 -1px var(--pace-color, #000000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/black/pace-theme-material.css b/themes/black/pace-theme-material.css index 22a831af..3fbe9748 100644 --- a/themes/black/pace-theme-material.css +++ b/themes/black/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #000000; + color: var(--pace-color, #000000); } .pace-progress { diff --git a/themes/black/pace-theme-minimal.css b/themes/black/pace-theme-minimal.css index 671ef849..277b65cc 100644 --- a/themes/black/pace-theme-minimal.css +++ b/themes/black/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #000000; + background: var(--pace-color, #000000); position: fixed; z-index: 2000; top: 0; diff --git a/themes/blue/pace-theme-barber-shop.css b/themes/blue/pace-theme-barber-shop.css index e30e7d8c..fed3f3e9 100644 --- a/themes/blue/pace-theme-barber-shop.css +++ b/themes/blue/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #2299dd; + background-color: var(--pace-color, #2299dd); position: fixed; top: 0; bottom: 0; diff --git a/themes/blue/pace-theme-big-counter.css b/themes/blue/pace-theme-big-counter.css index d9c576dc..332e51b1 100644 --- a/themes/blue/pace-theme-big-counter.css +++ b/themes/blue/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(34, 153, 221, 0.19999999999999996); + color: var(--pace-color, rgba(34, 153, 221, 0.19999999999999996)); } diff --git a/themes/blue/pace-theme-bounce.css b/themes/blue/pace-theme-bounce.css index f4798657..2ae96d4f 100644 --- a/themes/blue/pace-theme-bounce.css +++ b/themes/blue/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #2299dd; + background: var(--pace-color, #2299dd); position: absolute; top: 0; z-index: 1911; diff --git a/themes/blue/pace-theme-center-atom.css b/themes/blue/pace-theme-center-atom.css index c178cd83..e2faf070 100644 --- a/themes/blue/pace-theme-center-atom.css +++ b/themes/blue/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #2299dd; + background: var(--pace-color, #2299dd); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #2299dd; + border: 5px solid var(--pace-color, #2299dd); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #2299dd; + border: 5px solid var(--pace-color, #2299dd); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #2299dd; + border: 5px solid var(--pace-color, #2299dd); content: ' '; display: block; position: absolute; diff --git a/themes/blue/pace-theme-center-circle.css b/themes/blue/pace-theme-center-circle.css index 403ab0d4..bebd4220 100644 --- a/themes/blue/pace-theme-center-circle.css +++ b/themes/blue/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(34, 153, 221, 0.8); + background: var(--pace-color, rgba(34, 153, 221, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/blue/pace-theme-center-radar.css b/themes/blue/pace-theme-center-radar.css index 60967b28..7bb9ecae 100644 --- a/themes/blue/pace-theme-center-radar.css +++ b/themes/blue/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #2299dd transparent transparent; + border-color: var(--pace-color, #2299dd) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #2299dd transparent transparent; + border-color: var(--pace-color, #2299dd) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/blue/pace-theme-center-simple.css b/themes/blue/pace-theme-center-simple.css index 0844d31f..62b3fb88 100644 --- a/themes/blue/pace-theme-center-simple.css +++ b/themes/blue/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #2299dd; + border: 1px solid var(--pace-color, #2299dd); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #2299dd; + background: var(--pace-color, #2299dd); } .pace.pace-inactive { diff --git a/themes/blue/pace-theme-corner-indicator.css b/themes/blue/pace-theme-corner-indicator.css index e0cc57e6..4b090286 100644 --- a/themes/blue/pace-theme-corner-indicator.css +++ b/themes/blue/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #2299dd; + background: var(--pace-color, #2299dd); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/blue/pace-theme-fill-left.css b/themes/blue/pace-theme-fill-left.css index acbaf456..f0770515 100644 --- a/themes/blue/pace-theme-fill-left.css +++ b/themes/blue/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(34, 153, 221, 0.19999999999999996); + background-color: var(--pace-color, rgba(34, 153, 221, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/blue/pace-theme-flash.css b/themes/blue/pace-theme-flash.css index d9bca466..a6dd84d1 100644 --- a/themes/blue/pace-theme-flash.css +++ b/themes/blue/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #2299dd; + background: var(--pace-color, #2299dd); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #2299dd, 0 0 5px #2299dd; + box-shadow: 0 0 10px var(--pace-color, #2299dd), 0 0 5px var(--pace-color, #2299dd); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #2299dd; - border-left-color: #2299dd; + border-top-color: var(--pace-color, #2299dd); + border-left-color: var(--pace-color, #2299dd); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/blue/pace-theme-flat-top.css b/themes/blue/pace-theme-flat-top.css index 21154482..490636c5 100644 --- a/themes/blue/pace-theme-flat-top.css +++ b/themes/blue/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #2299dd; + background: var(--pace-color, #2299dd); pointer-events: none; } diff --git a/themes/blue/pace-theme-loading-bar.css b/themes/blue/pace-theme-loading-bar.css index 8448a5e5..8950c867 100644 --- a/themes/blue/pace-theme-loading-bar.css +++ b/themes/blue/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #2299dd; - color: #2299dd; + background: var(--pace-color, #2299dd); + color: var(--pace-color, #2299dd); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #2299dd, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #2299dd), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/blue/pace-theme-mac-osx.css b/themes/blue/pace-theme-mac-osx.css index 175f3b28..2bb82bec 100644 --- a/themes/blue/pace-theme-mac-osx.css +++ b/themes/blue/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #0087E1; + background-color: var(--pace-color, #0087E1); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #00558F), inset 0 -1px var(--pace-color, #00558F), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #00558F), inset 0 -1px var(--pace-color, #00558F), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #00558F), inset 0 -1px var(--pace-color, #00558F), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #00558F), inset 0 -1px var(--pace-color, #00558F), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/blue/pace-theme-material.css b/themes/blue/pace-theme-material.css index 021859f5..4c32a798 100644 --- a/themes/blue/pace-theme-material.css +++ b/themes/blue/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #2299dd; + color: var(--pace-color, #2299dd); } .pace-progress { diff --git a/themes/blue/pace-theme-minimal.css b/themes/blue/pace-theme-minimal.css index a344a194..622b16cd 100644 --- a/themes/blue/pace-theme-minimal.css +++ b/themes/blue/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #2299dd; + background: var(--pace-color, #2299dd); position: fixed; z-index: 2000; top: 0; diff --git a/themes/green/pace-theme-barber-shop.css b/themes/green/pace-theme-barber-shop.css index f4a3bb05..f07c0de4 100644 --- a/themes/green/pace-theme-barber-shop.css +++ b/themes/green/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #22df80; + background-color: var(--pace-color, #22df80); position: fixed; top: 0; bottom: 0; diff --git a/themes/green/pace-theme-big-counter.css b/themes/green/pace-theme-big-counter.css index 73174689..eb355f6b 100644 --- a/themes/green/pace-theme-big-counter.css +++ b/themes/green/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(34, 223, 128, 0.19999999999999996); + color: var(--pace-color, rgba(34, 223, 128, 0.19999999999999996)); } diff --git a/themes/green/pace-theme-bounce.css b/themes/green/pace-theme-bounce.css index d17f375e..658bbf20 100644 --- a/themes/green/pace-theme-bounce.css +++ b/themes/green/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #22df80; + background: var(--pace-color, #22df80); position: absolute; top: 0; z-index: 1911; diff --git a/themes/green/pace-theme-center-atom.css b/themes/green/pace-theme-center-atom.css index 54f86fd4..b646080f 100644 --- a/themes/green/pace-theme-center-atom.css +++ b/themes/green/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #22df80; + background: var(--pace-color, #22df80); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #22df80; + border: 5px solid var(--pace-color, #22df80); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #22df80; + border: 5px solid var(--pace-color, #22df80); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #22df80; + border: 5px solid var(--pace-color, #22df80); content: ' '; display: block; position: absolute; diff --git a/themes/green/pace-theme-center-circle.css b/themes/green/pace-theme-center-circle.css index f34927c7..906dc120 100644 --- a/themes/green/pace-theme-center-circle.css +++ b/themes/green/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(34, 223, 128, 0.8); + background: var(--pace-color, rgba(34, 223, 128, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/green/pace-theme-center-radar.css b/themes/green/pace-theme-center-radar.css index 83534591..0b30bdce 100644 --- a/themes/green/pace-theme-center-radar.css +++ b/themes/green/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #22df80 transparent transparent; + border-color: var(--pace-color, #22df80) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #22df80 transparent transparent; + border-color: var(--pace-color, #22df80) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/green/pace-theme-center-simple.css b/themes/green/pace-theme-center-simple.css index fa1f4278..b8ef2965 100644 --- a/themes/green/pace-theme-center-simple.css +++ b/themes/green/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #22df80; + border: 1px solid var(--pace-color, #22df80); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #22df80; + background: var(--pace-color, #22df80); } .pace.pace-inactive { diff --git a/themes/green/pace-theme-corner-indicator.css b/themes/green/pace-theme-corner-indicator.css index 35ad92c9..a68f9def 100644 --- a/themes/green/pace-theme-corner-indicator.css +++ b/themes/green/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #22df80; + background: var(--pace-color, #22df80); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/green/pace-theme-fill-left.css b/themes/green/pace-theme-fill-left.css index 3bfa926a..c68b6b3c 100644 --- a/themes/green/pace-theme-fill-left.css +++ b/themes/green/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(34, 223, 128, 0.19999999999999996); + background-color: var(--pace-color, rgba(34, 223, 128, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/green/pace-theme-flash.css b/themes/green/pace-theme-flash.css index 812779ba..6948ffc2 100644 --- a/themes/green/pace-theme-flash.css +++ b/themes/green/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #22df80; + background: var(--pace-color, #22df80); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #22df80, 0 0 5px #22df80; + box-shadow: 0 0 10px var(--pace-color, #22df80), 0 0 5px var(--pace-color, #22df80); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #22df80; - border-left-color: #22df80; + border-top-color: var(--pace-color, #22df80); + border-left-color: var(--pace-color, #22df80); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/green/pace-theme-flat-top.css b/themes/green/pace-theme-flat-top.css index 910ef065..1a98754c 100644 --- a/themes/green/pace-theme-flat-top.css +++ b/themes/green/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #22df80; + background: var(--pace-color, #22df80); pointer-events: none; } diff --git a/themes/green/pace-theme-loading-bar.css b/themes/green/pace-theme-loading-bar.css index 3280418c..53b4dd5c 100644 --- a/themes/green/pace-theme-loading-bar.css +++ b/themes/green/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #22df80; - color: #22df80; + background: var(--pace-color, #22df80); + color: var(--pace-color, #22df80); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #22df80, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #22df80), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/green/pace-theme-mac-osx.css b/themes/green/pace-theme-mac-osx.css index 56dad0d3..6ee42a5d 100644 --- a/themes/green/pace-theme-mac-osx.css +++ b/themes/green/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #00E466; + background-color: var(--pace-color, #00E466); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #009140), inset 0 -1px var(--pace-color, #009140), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #009140), inset 0 -1px var(--pace-color, #009140), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #009140), inset 0 -1px var(--pace-color, #009140), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #009140), inset 0 -1px var(--pace-color, #009140), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/green/pace-theme-material.css b/themes/green/pace-theme-material.css index f7fcaa84..21e131ab 100644 --- a/themes/green/pace-theme-material.css +++ b/themes/green/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #22df80; + color: var(--pace-color, #22df80); } .pace-progress { diff --git a/themes/green/pace-theme-minimal.css b/themes/green/pace-theme-minimal.css index 914d0fb6..ea854434 100644 --- a/themes/green/pace-theme-minimal.css +++ b/themes/green/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #22df80; + background: var(--pace-color, #22df80); position: fixed; z-index: 2000; top: 0; diff --git a/themes/orange/pace-theme-barber-shop.css b/themes/orange/pace-theme-barber-shop.css index b7ed3fbc..97487178 100644 --- a/themes/orange/pace-theme-barber-shop.css +++ b/themes/orange/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #eb7a55; + background-color: var(--pace-color, #eb7a55); position: fixed; top: 0; bottom: 0; diff --git a/themes/orange/pace-theme-big-counter.css b/themes/orange/pace-theme-big-counter.css index 00308d9b..abb3fcb3 100644 --- a/themes/orange/pace-theme-big-counter.css +++ b/themes/orange/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(235, 122, 85, 0.19999999999999996); + color: var(--pace-color, rgba(235, 122, 85, 0.19999999999999996)); } diff --git a/themes/orange/pace-theme-bounce.css b/themes/orange/pace-theme-bounce.css index f94c75d6..6ceb25ee 100644 --- a/themes/orange/pace-theme-bounce.css +++ b/themes/orange/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #eb7a55; + background: var(--pace-color, #eb7a55); position: absolute; top: 0; z-index: 1911; diff --git a/themes/orange/pace-theme-center-atom.css b/themes/orange/pace-theme-center-atom.css index 9c55e381..339e4e57 100644 --- a/themes/orange/pace-theme-center-atom.css +++ b/themes/orange/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #eb7a55; + background: var(--pace-color, #eb7a55); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #eb7a55; + border: 5px solid var(--pace-color, #eb7a55); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #eb7a55; + border: 5px solid var(--pace-color, #eb7a55); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #eb7a55; + border: 5px solid var(--pace-color, #eb7a55); content: ' '; display: block; position: absolute; diff --git a/themes/orange/pace-theme-center-circle.css b/themes/orange/pace-theme-center-circle.css index 0334a175..199642a4 100644 --- a/themes/orange/pace-theme-center-circle.css +++ b/themes/orange/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(235, 122, 85, 0.8); + background: var(--pace-color, rgba(235, 122, 85, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/orange/pace-theme-center-radar.css b/themes/orange/pace-theme-center-radar.css index 4c0ef391..879c6185 100644 --- a/themes/orange/pace-theme-center-radar.css +++ b/themes/orange/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #eb7a55 transparent transparent; + border-color: var(--pace-color, #eb7a55) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #eb7a55 transparent transparent; + border-color: var(--pace-color, #eb7a55) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/orange/pace-theme-center-simple.css b/themes/orange/pace-theme-center-simple.css index 5a5e9790..59a50da4 100644 --- a/themes/orange/pace-theme-center-simple.css +++ b/themes/orange/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #eb7a55; + border: 1px solid var(--pace-color, #eb7a55); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #eb7a55; + background: var(--pace-color, #eb7a55); } .pace.pace-inactive { diff --git a/themes/orange/pace-theme-corner-indicator.css b/themes/orange/pace-theme-corner-indicator.css index eda7fe4e..7b189acb 100644 --- a/themes/orange/pace-theme-corner-indicator.css +++ b/themes/orange/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #eb7a55; + background: var(--pace-color, #eb7a55); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/orange/pace-theme-fill-left.css b/themes/orange/pace-theme-fill-left.css index a775dae7..52bb67c3 100644 --- a/themes/orange/pace-theme-fill-left.css +++ b/themes/orange/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(235, 122, 85, 0.19999999999999996); + background-color: var(--pace-color, rgba(235, 122, 85, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/orange/pace-theme-flash.css b/themes/orange/pace-theme-flash.css index b226496a..3436df34 100644 --- a/themes/orange/pace-theme-flash.css +++ b/themes/orange/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #eb7a55; + background: var(--pace-color, #eb7a55); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #eb7a55, 0 0 5px #eb7a55; + box-shadow: 0 0 10px var(--pace-color, #eb7a55), 0 0 5px var(--pace-color, #eb7a55); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #eb7a55; - border-left-color: #eb7a55; + border-top-color: var(--pace-color, #eb7a55); + border-left-color: var(--pace-color, #eb7a55); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/orange/pace-theme-flat-top.css b/themes/orange/pace-theme-flat-top.css index 887e296d..8090f105 100644 --- a/themes/orange/pace-theme-flat-top.css +++ b/themes/orange/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #eb7a55; + background: var(--pace-color, #eb7a55); pointer-events: none; } diff --git a/themes/orange/pace-theme-loading-bar.css b/themes/orange/pace-theme-loading-bar.css index 7d468c3b..e83d6b1a 100644 --- a/themes/orange/pace-theme-loading-bar.css +++ b/themes/orange/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #eb7a55; - color: #eb7a55; + background: var(--pace-color, #eb7a55); + color: var(--pace-color, #eb7a55); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #eb7a55, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #eb7a55), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/orange/pace-theme-mac-osx.css b/themes/orange/pace-theme-mac-osx.css index 4cfe25c1..1c3a6ecc 100644 --- a/themes/orange/pace-theme-mac-osx.css +++ b/themes/orange/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #FF2C00; + background-color: var(--pace-color, #FF2C00); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #BF1B00), inset 0 -1px var(--pace-color, #BF1B00), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #BF1B00), inset 0 -1px var(--pace-color, #BF1B00), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #BF1B00), inset 0 -1px var(--pace-color, #BF1B00), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #BF1B00), inset 0 -1px var(--pace-color, #BF1B00), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/orange/pace-theme-material.css b/themes/orange/pace-theme-material.css index 0210297f..86665d6e 100644 --- a/themes/orange/pace-theme-material.css +++ b/themes/orange/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #eb7a55; + color: var(--pace-color, #eb7a55); } .pace-progress { diff --git a/themes/orange/pace-theme-minimal.css b/themes/orange/pace-theme-minimal.css index e02aab16..a816309b 100644 --- a/themes/orange/pace-theme-minimal.css +++ b/themes/orange/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #eb7a55; + background: var(--pace-color, #eb7a55); position: fixed; z-index: 2000; top: 0; diff --git a/themes/pink/pace-theme-barber-shop.css b/themes/pink/pace-theme-barber-shop.css index a3b82e84..e4aada7b 100644 --- a/themes/pink/pace-theme-barber-shop.css +++ b/themes/pink/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #e90f92; + background-color: var(--pace-color, #e90f92); position: fixed; top: 0; bottom: 0; diff --git a/themes/pink/pace-theme-big-counter.css b/themes/pink/pace-theme-big-counter.css index 396f7aa7..9e4b8141 100644 --- a/themes/pink/pace-theme-big-counter.css +++ b/themes/pink/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(233, 15, 146, 0.19999999999999996); + color: var(--pace-color, rgba(233, 15, 146, 0.19999999999999996)); } diff --git a/themes/pink/pace-theme-bounce.css b/themes/pink/pace-theme-bounce.css index 26fecda1..fd003411 100644 --- a/themes/pink/pace-theme-bounce.css +++ b/themes/pink/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #e90f92; + background: var(--pace-color, #e90f92); position: absolute; top: 0; z-index: 1911; diff --git a/themes/pink/pace-theme-center-atom.css b/themes/pink/pace-theme-center-atom.css index e255d083..a1fe98cd 100644 --- a/themes/pink/pace-theme-center-atom.css +++ b/themes/pink/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #e90f92; + background: var(--pace-color, #e90f92); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #e90f92; + border: 5px solid var(--pace-color, #e90f92); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #e90f92; + border: 5px solid var(--pace-color, #e90f92); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #e90f92; + border: 5px solid var(--pace-color, #e90f92); content: ' '; display: block; position: absolute; diff --git a/themes/pink/pace-theme-center-circle.css b/themes/pink/pace-theme-center-circle.css index c3aa0f22..fc0afa6e 100644 --- a/themes/pink/pace-theme-center-circle.css +++ b/themes/pink/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(233, 15, 146, 0.8); + background: var(--pace-color, rgba(233, 15, 146, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/pink/pace-theme-center-radar.css b/themes/pink/pace-theme-center-radar.css index 1c49637b..b3359d56 100644 --- a/themes/pink/pace-theme-center-radar.css +++ b/themes/pink/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #e90f92 transparent transparent; + border-color: var(--pace-color, #e90f92) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #e90f92 transparent transparent; + border-color: var(--pace-color, #e90f92) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/pink/pace-theme-center-simple.css b/themes/pink/pace-theme-center-simple.css index 446bd67e..d72781e8 100644 --- a/themes/pink/pace-theme-center-simple.css +++ b/themes/pink/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #e90f92; + border: 1px solid var(--pace-color, #e90f92); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #e90f92; + background: var(--pace-color, #e90f92); } .pace.pace-inactive { diff --git a/themes/pink/pace-theme-corner-indicator.css b/themes/pink/pace-theme-corner-indicator.css index f971a189..7c0c3157 100644 --- a/themes/pink/pace-theme-corner-indicator.css +++ b/themes/pink/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #e90f92; + background: var(--pace-color, #e90f92); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/pink/pace-theme-fill-left.css b/themes/pink/pace-theme-fill-left.css index aaa1f850..1c0b4a62 100644 --- a/themes/pink/pace-theme-fill-left.css +++ b/themes/pink/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(233, 15, 146, 0.19999999999999996); + background-color: var(--pace-color, rgba(233, 15, 146, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/pink/pace-theme-flash.css b/themes/pink/pace-theme-flash.css index e428c5c1..f58ea3be 100644 --- a/themes/pink/pace-theme-flash.css +++ b/themes/pink/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #e90f92; + background: var(--pace-color, #e90f92); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92; + box-shadow: 0 0 10px var(--pace-color, #e90f92), 0 0 5px var(--pace-color, #e90f92); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #e90f92; - border-left-color: #e90f92; + border-top-color: var(--pace-color, #e90f92); + border-left-color: var(--pace-color, #e90f92); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/pink/pace-theme-flat-top.css b/themes/pink/pace-theme-flat-top.css index e4ff310d..af2fb114 100644 --- a/themes/pink/pace-theme-flat-top.css +++ b/themes/pink/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #e90f92; + background: var(--pace-color, #e90f92); pointer-events: none; } diff --git a/themes/pink/pace-theme-loading-bar.css b/themes/pink/pace-theme-loading-bar.css index e147a0fe..1d6e6114 100644 --- a/themes/pink/pace-theme-loading-bar.css +++ b/themes/pink/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #e90f92; - color: #e90f92; + background: var(--pace-color, #e90f92); + color: var(--pace-color, #e90f92); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #e90f92, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #e90f92), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/pink/pace-theme-mac-osx.css b/themes/pink/pace-theme-mac-osx.css index d3b87e92..8c741f3c 100644 --- a/themes/pink/pace-theme-mac-osx.css +++ b/themes/pink/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #F40080; + background-color: var(--pace-color, #F40080); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #9F0053), inset 0 -1px var(--pace-color, #9F0053), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #9F0053), inset 0 -1px var(--pace-color, #9F0053), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #9F0053), inset 0 -1px var(--pace-color, #9F0053), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #9F0053), inset 0 -1px var(--pace-color, #9F0053), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/pink/pace-theme-material.css b/themes/pink/pace-theme-material.css index 880a58e9..27db6805 100644 --- a/themes/pink/pace-theme-material.css +++ b/themes/pink/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #e90f92; + color: var(--pace-color, #e90f92); } .pace-progress { diff --git a/themes/pink/pace-theme-minimal.css b/themes/pink/pace-theme-minimal.css index 619bdcd9..7f066792 100644 --- a/themes/pink/pace-theme-minimal.css +++ b/themes/pink/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #e90f92; + background: var(--pace-color, #e90f92); position: fixed; z-index: 2000; top: 0; diff --git a/themes/purple/pace-theme-barber-shop.css b/themes/purple/pace-theme-barber-shop.css index 987fbec4..a9f6df18 100644 --- a/themes/purple/pace-theme-barber-shop.css +++ b/themes/purple/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #7c60e0; + background-color: var(--pace-color, #7c60e0); position: fixed; top: 0; bottom: 0; diff --git a/themes/purple/pace-theme-big-counter.css b/themes/purple/pace-theme-big-counter.css index 51ac58e5..44567deb 100644 --- a/themes/purple/pace-theme-big-counter.css +++ b/themes/purple/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(124, 96, 224, 0.19999999999999996); + color: var(--pace-color, rgba(124, 96, 224, 0.19999999999999996)); } diff --git a/themes/purple/pace-theme-bounce.css b/themes/purple/pace-theme-bounce.css index f93f986b..a98ac855 100644 --- a/themes/purple/pace-theme-bounce.css +++ b/themes/purple/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #7c60e0; + background: var(--pace-color, #7c60e0); position: absolute; top: 0; z-index: 1911; diff --git a/themes/purple/pace-theme-center-atom.css b/themes/purple/pace-theme-center-atom.css index 33b40151..1992f0c6 100644 --- a/themes/purple/pace-theme-center-atom.css +++ b/themes/purple/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #7c60e0; + background: var(--pace-color, #7c60e0); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #7c60e0; + border: 5px solid var(--pace-color, #7c60e0); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #7c60e0; + border: 5px solid var(--pace-color, #7c60e0); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #7c60e0; + border: 5px solid var(--pace-color, #7c60e0); content: ' '; display: block; position: absolute; diff --git a/themes/purple/pace-theme-center-circle.css b/themes/purple/pace-theme-center-circle.css index 08938b05..64c8bb81 100644 --- a/themes/purple/pace-theme-center-circle.css +++ b/themes/purple/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(124, 96, 224, 0.8); + background: var(--pace-color, rgba(124, 96, 224, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/purple/pace-theme-center-radar.css b/themes/purple/pace-theme-center-radar.css index c05dd0cc..68eeccf7 100644 --- a/themes/purple/pace-theme-center-radar.css +++ b/themes/purple/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #7c60e0 transparent transparent; + border-color: var(--pace-color, #7c60e0) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #7c60e0 transparent transparent; + border-color: var(--pace-color, #7c60e0) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/purple/pace-theme-center-simple.css b/themes/purple/pace-theme-center-simple.css index 3b3df67a..01facec7 100644 --- a/themes/purple/pace-theme-center-simple.css +++ b/themes/purple/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #7c60e0; + border: 1px solid var(--pace-color, #7c60e0); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #7c60e0; + background: var(--pace-color, #7c60e0); } .pace.pace-inactive { diff --git a/themes/purple/pace-theme-corner-indicator.css b/themes/purple/pace-theme-corner-indicator.css index 0d2060f9..a22e16fb 100644 --- a/themes/purple/pace-theme-corner-indicator.css +++ b/themes/purple/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #7c60e0; + background: var(--pace-color, #7c60e0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/purple/pace-theme-fill-left.css b/themes/purple/pace-theme-fill-left.css index d5b38976..8611cd4f 100644 --- a/themes/purple/pace-theme-fill-left.css +++ b/themes/purple/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(124, 96, 224, 0.19999999999999996); + background-color: var(--pace-color, rgba(124, 96, 224, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/purple/pace-theme-flash.css b/themes/purple/pace-theme-flash.css index 046cbefe..e13ed315 100644 --- a/themes/purple/pace-theme-flash.css +++ b/themes/purple/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #7c60e0; + background: var(--pace-color, #7c60e0); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #7c60e0, 0 0 5px #7c60e0; + box-shadow: 0 0 10px var(--pace-color, #7c60e0), 0 0 5px var(--pace-color, #7c60e0); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #7c60e0; - border-left-color: #7c60e0; + border-top-color: var(--pace-color, #7c60e0); + border-left-color: var(--pace-color, #7c60e0); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/purple/pace-theme-flat-top.css b/themes/purple/pace-theme-flat-top.css index 86d517e5..2955d8f1 100644 --- a/themes/purple/pace-theme-flat-top.css +++ b/themes/purple/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #7c60e0; + background: var(--pace-color, #7c60e0); pointer-events: none; } diff --git a/themes/purple/pace-theme-loading-bar.css b/themes/purple/pace-theme-loading-bar.css index a62c6ba4..ae981bef 100644 --- a/themes/purple/pace-theme-loading-bar.css +++ b/themes/purple/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #7c60e0; - color: #7c60e0; + background: var(--pace-color, #7c60e0); + color: var(--pace-color, #7c60e0); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #7c60e0, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #7c60e0), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/purple/pace-theme-mac-osx.css b/themes/purple/pace-theme-mac-osx.css index 6046e6bd..67ea1cc6 100644 --- a/themes/purple/pace-theme-mac-osx.css +++ b/themes/purple/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #3000FF; + background-color: var(--pace-color, #3000FF); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #1D00AF), inset 0 -1px var(--pace-color, #1D00AF), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #1D00AF), inset 0 -1px var(--pace-color, #1D00AF), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #1D00AF), inset 0 -1px var(--pace-color, #1D00AF), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #1D00AF), inset 0 -1px var(--pace-color, #1D00AF), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/purple/pace-theme-material.css b/themes/purple/pace-theme-material.css index c4d95d44..d9f63ac4 100644 --- a/themes/purple/pace-theme-material.css +++ b/themes/purple/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #7c60e0; + color: var(--pace-color, #7c60e0); } .pace-progress { diff --git a/themes/purple/pace-theme-minimal.css b/themes/purple/pace-theme-minimal.css index f81c2ae7..c273dba6 100644 --- a/themes/purple/pace-theme-minimal.css +++ b/themes/purple/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #7c60e0; + background: var(--pace-color, #7c60e0); position: fixed; z-index: 2000; top: 0; diff --git a/themes/red/pace-theme-barber-shop.css b/themes/red/pace-theme-barber-shop.css index 940bbe5c..ecc590a7 100644 --- a/themes/red/pace-theme-barber-shop.css +++ b/themes/red/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #ee3148; + background-color: var(--pace-color, #ee3148); position: fixed; top: 0; bottom: 0; diff --git a/themes/red/pace-theme-big-counter.css b/themes/red/pace-theme-big-counter.css index dc3dcddf..ada1b113 100644 --- a/themes/red/pace-theme-big-counter.css +++ b/themes/red/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(238, 49, 72, 0.19999999999999996); + color: var(--pace-color, rgba(238, 49, 72, 0.19999999999999996)); } diff --git a/themes/red/pace-theme-bounce.css b/themes/red/pace-theme-bounce.css index dc439663..3ae04ec4 100644 --- a/themes/red/pace-theme-bounce.css +++ b/themes/red/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #ee3148; + background: var(--pace-color, #ee3148); position: absolute; top: 0; z-index: 1911; diff --git a/themes/red/pace-theme-center-atom.css b/themes/red/pace-theme-center-atom.css index b25ccc1e..64a67bcb 100644 --- a/themes/red/pace-theme-center-atom.css +++ b/themes/red/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #ee3148; + background: var(--pace-color, #ee3148); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #ee3148; + border: 5px solid var(--pace-color, #ee3148); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #ee3148; + border: 5px solid var(--pace-color, #ee3148); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #ee3148; + border: 5px solid var(--pace-color, #ee3148); content: ' '; display: block; position: absolute; diff --git a/themes/red/pace-theme-center-circle.css b/themes/red/pace-theme-center-circle.css index 7af81d27..3dd9eb2a 100644 --- a/themes/red/pace-theme-center-circle.css +++ b/themes/red/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(238, 49, 72, 0.8); + background: var(--pace-color, rgba(238, 49, 72, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/red/pace-theme-center-radar.css b/themes/red/pace-theme-center-radar.css index 1603d71e..500b2228 100644 --- a/themes/red/pace-theme-center-radar.css +++ b/themes/red/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #ee3148 transparent transparent; + border-color: var(--pace-color, #ee3148) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #ee3148 transparent transparent; + border-color: var(--pace-color, #ee3148) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/red/pace-theme-center-simple.css b/themes/red/pace-theme-center-simple.css index e4a21117..9cc147fe 100644 --- a/themes/red/pace-theme-center-simple.css +++ b/themes/red/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #ee3148; + border: 1px solid var(--pace-color, #ee3148); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #ee3148; + background: var(--pace-color, #ee3148); } .pace.pace-inactive { diff --git a/themes/red/pace-theme-corner-indicator.css b/themes/red/pace-theme-corner-indicator.css index 9994388a..0eb672ab 100644 --- a/themes/red/pace-theme-corner-indicator.css +++ b/themes/red/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #ee3148; + background: var(--pace-color, #ee3148); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/red/pace-theme-fill-left.css b/themes/red/pace-theme-fill-left.css index eb7c57d3..bfa86685 100644 --- a/themes/red/pace-theme-fill-left.css +++ b/themes/red/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(238, 49, 72, 0.19999999999999996); + background-color: var(--pace-color, rgba(238, 49, 72, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/red/pace-theme-flash.css b/themes/red/pace-theme-flash.css index 7eb57d8b..f6aacb65 100644 --- a/themes/red/pace-theme-flash.css +++ b/themes/red/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #ee3148; + background: var(--pace-color, #ee3148); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #ee3148, 0 0 5px #ee3148; + box-shadow: 0 0 10px var(--pace-color, #ee3148), 0 0 5px var(--pace-color, #ee3148); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #ee3148; - border-left-color: #ee3148; + border-top-color: var(--pace-color, #ee3148); + border-left-color: var(--pace-color, #ee3148); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/red/pace-theme-flat-top.css b/themes/red/pace-theme-flat-top.css index 629ad662..0fa44465 100644 --- a/themes/red/pace-theme-flat-top.css +++ b/themes/red/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #ee3148; + background: var(--pace-color, #ee3148); pointer-events: none; } diff --git a/themes/red/pace-theme-loading-bar.css b/themes/red/pace-theme-loading-bar.css index 9d86bf83..99b89f61 100644 --- a/themes/red/pace-theme-loading-bar.css +++ b/themes/red/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #ee3148; - color: #ee3148; + background: var(--pace-color, #ee3148); + color: var(--pace-color, #ee3148); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #ee3148, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #ee3148), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/red/pace-theme-mac-osx.css b/themes/red/pace-theme-mac-osx.css index 613f7363..6f101b26 100644 --- a/themes/red/pace-theme-mac-osx.css +++ b/themes/red/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #FF0000; + background-color: var(--pace-color, #FF0000); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #AF0000), inset 0 -1px var(--pace-color, #AF0000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #AF0000), inset 0 -1px var(--pace-color, #AF0000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #AF0000), inset 0 -1px var(--pace-color, #AF0000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #AF0000), inset 0 -1px var(--pace-color, #AF0000), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/red/pace-theme-material.css b/themes/red/pace-theme-material.css index f691cbdc..683e7eef 100644 --- a/themes/red/pace-theme-material.css +++ b/themes/red/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #ee3148; + color: var(--pace-color, #ee3148); } .pace-progress { diff --git a/themes/red/pace-theme-minimal.css b/themes/red/pace-theme-minimal.css index c84e12b9..751f442a 100644 --- a/themes/red/pace-theme-minimal.css +++ b/themes/red/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #ee3148; + background: var(--pace-color, #ee3148); position: fixed; z-index: 2000; top: 0; diff --git a/themes/silver/pace-theme-barber-shop.css b/themes/silver/pace-theme-barber-shop.css index 4c06fdfb..29bc7891 100644 --- a/themes/silver/pace-theme-barber-shop.css +++ b/themes/silver/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #d6d6d6; + background-color: var(--pace-color, #d6d6d6); position: fixed; top: 0; bottom: 0; diff --git a/themes/silver/pace-theme-big-counter.css b/themes/silver/pace-theme-big-counter.css index 8b88b8dd..b2c0ffee 100644 --- a/themes/silver/pace-theme-big-counter.css +++ b/themes/silver/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(214, 214, 214, 0.19999999999999996); + color: var(--pace-color, rgba(214, 214, 214, 0.19999999999999996)); } diff --git a/themes/silver/pace-theme-bounce.css b/themes/silver/pace-theme-bounce.css index 760dacd0..6e5c3fb7 100644 --- a/themes/silver/pace-theme-bounce.css +++ b/themes/silver/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #d6d6d6; + background: var(--pace-color, #d6d6d6); position: absolute; top: 0; z-index: 1911; diff --git a/themes/silver/pace-theme-center-atom.css b/themes/silver/pace-theme-center-atom.css index 4d46d800..44f58c3e 100644 --- a/themes/silver/pace-theme-center-atom.css +++ b/themes/silver/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #d6d6d6; + background: var(--pace-color, #d6d6d6); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #d6d6d6; + border: 5px solid var(--pace-color, #d6d6d6); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #d6d6d6; + border: 5px solid var(--pace-color, #d6d6d6); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #d6d6d6; + border: 5px solid var(--pace-color, #d6d6d6); content: ' '; display: block; position: absolute; diff --git a/themes/silver/pace-theme-center-circle.css b/themes/silver/pace-theme-center-circle.css index d2d3eb4e..c17b47bc 100644 --- a/themes/silver/pace-theme-center-circle.css +++ b/themes/silver/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(214, 214, 214, 0.8); + background: var(--pace-color, rgba(214, 214, 214, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/silver/pace-theme-center-radar.css b/themes/silver/pace-theme-center-radar.css index 5d506c34..b98f88f3 100644 --- a/themes/silver/pace-theme-center-radar.css +++ b/themes/silver/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #d6d6d6 transparent transparent; + border-color: var(--pace-color, #d6d6d6) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #d6d6d6 transparent transparent; + border-color: var(--pace-color, #d6d6d6) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/silver/pace-theme-center-simple.css b/themes/silver/pace-theme-center-simple.css index ffdd90ef..e5aa60ff 100644 --- a/themes/silver/pace-theme-center-simple.css +++ b/themes/silver/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #d6d6d6; + border: 1px solid var(--pace-color, #d6d6d6); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #d6d6d6; + background: var(--pace-color, #d6d6d6); } .pace.pace-inactive { diff --git a/themes/silver/pace-theme-corner-indicator.css b/themes/silver/pace-theme-corner-indicator.css index 4090e683..3ded9f27 100644 --- a/themes/silver/pace-theme-corner-indicator.css +++ b/themes/silver/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #d6d6d6; + background: var(--pace-color, #d6d6d6); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/silver/pace-theme-fill-left.css b/themes/silver/pace-theme-fill-left.css index 1193580e..22e3028d 100644 --- a/themes/silver/pace-theme-fill-left.css +++ b/themes/silver/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(214, 214, 214, 0.19999999999999996); + background-color: var(--pace-color, rgba(214, 214, 214, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/silver/pace-theme-flash.css b/themes/silver/pace-theme-flash.css index b5462485..4de4b1ff 100644 --- a/themes/silver/pace-theme-flash.css +++ b/themes/silver/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #d6d6d6; + background: var(--pace-color, #d6d6d6); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #d6d6d6, 0 0 5px #d6d6d6; + box-shadow: 0 0 10px var(--pace-color, #d6d6d6), 0 0 5px var(--pace-color, #d6d6d6); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #d6d6d6; - border-left-color: #d6d6d6; + border-top-color: var(--pace-color, #d6d6d6); + border-left-color: var(--pace-color, #d6d6d6); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/silver/pace-theme-flat-top.css b/themes/silver/pace-theme-flat-top.css index 7d1694af..4a54eb07 100644 --- a/themes/silver/pace-theme-flat-top.css +++ b/themes/silver/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #d6d6d6; + background: var(--pace-color, #d6d6d6); pointer-events: none; } diff --git a/themes/silver/pace-theme-loading-bar.css b/themes/silver/pace-theme-loading-bar.css index 1786717d..f94734da 100644 --- a/themes/silver/pace-theme-loading-bar.css +++ b/themes/silver/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #d6d6d6; - color: #d6d6d6; + background: var(--pace-color, #d6d6d6); + color: var(--pace-color, #d6d6d6); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #d6d6d6, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #d6d6d6), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/silver/pace-theme-mac-osx.css b/themes/silver/pace-theme-mac-osx.css index 6c84a812..8359ca6d 100644 --- a/themes/silver/pace-theme-mac-osx.css +++ b/themes/silver/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #ABABAB; + background-color: var(--pace-color, #ABABAB); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #6B6B6B), inset 0 -1px var(--pace-color, #6B6B6B), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #6B6B6B), inset 0 -1px var(--pace-color, #6B6B6B), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #6B6B6B), inset 0 -1px var(--pace-color, #6B6B6B), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #6B6B6B), inset 0 -1px var(--pace-color, #6B6B6B), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/silver/pace-theme-material.css b/themes/silver/pace-theme-material.css index 409b5c0c..60c07829 100644 --- a/themes/silver/pace-theme-material.css +++ b/themes/silver/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #d6d6d6; + color: var(--pace-color, #d6d6d6); } .pace-progress { diff --git a/themes/silver/pace-theme-minimal.css b/themes/silver/pace-theme-minimal.css index 9255af3d..d540afdf 100644 --- a/themes/silver/pace-theme-minimal.css +++ b/themes/silver/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #d6d6d6; + background: var(--pace-color, #d6d6d6); position: fixed; z-index: 2000; top: 0; diff --git a/themes/white/pace-theme-barber-shop.css b/themes/white/pace-theme-barber-shop.css index 90c3014c..09ab7629 100644 --- a/themes/white/pace-theme-barber-shop.css +++ b/themes/white/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #ffffff; + background-color: var(--pace-color, #ffffff); position: fixed; top: 0; bottom: 0; diff --git a/themes/white/pace-theme-big-counter.css b/themes/white/pace-theme-big-counter.css index 4ffdda4b..ee185b1a 100644 --- a/themes/white/pace-theme-big-counter.css +++ b/themes/white/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(255, 255, 255, 0.19999999999999996); + color: var(--pace-color, rgba(255, 255, 255, 0.19999999999999996)); } diff --git a/themes/white/pace-theme-bounce.css b/themes/white/pace-theme-bounce.css index ba65dcf5..c36a59a1 100644 --- a/themes/white/pace-theme-bounce.css +++ b/themes/white/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #ffffff; + background: var(--pace-color, #ffffff); position: absolute; top: 0; z-index: 1911; diff --git a/themes/white/pace-theme-center-atom.css b/themes/white/pace-theme-center-atom.css index 48f5bc6b..b2834093 100644 --- a/themes/white/pace-theme-center-atom.css +++ b/themes/white/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #ffffff; + background: var(--pace-color, #ffffff); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #ffffff; + border: 5px solid var(--pace-color, #ffffff); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #ffffff; + border: 5px solid var(--pace-color, #ffffff); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #ffffff; + border: 5px solid var(--pace-color, #ffffff); content: ' '; display: block; position: absolute; diff --git a/themes/white/pace-theme-center-circle.css b/themes/white/pace-theme-center-circle.css index 9709f4c1..19a02dc6 100644 --- a/themes/white/pace-theme-center-circle.css +++ b/themes/white/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(255, 255, 255, 0.8); + background: var(--pace-color, rgba(255, 255, 255, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/white/pace-theme-center-radar.css b/themes/white/pace-theme-center-radar.css index 6783df69..82c6b882 100644 --- a/themes/white/pace-theme-center-radar.css +++ b/themes/white/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #ffffff transparent transparent; + border-color: var(--pace-color, #ffffff) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #ffffff transparent transparent; + border-color: var(--pace-color, #ffffff) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/white/pace-theme-center-simple.css b/themes/white/pace-theme-center-simple.css index ff369fcd..f62cb594 100644 --- a/themes/white/pace-theme-center-simple.css +++ b/themes/white/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #ffffff; + border: 1px solid var(--pace-color, #ffffff); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #ffffff; + background: var(--pace-color, #ffffff); } .pace.pace-inactive { diff --git a/themes/white/pace-theme-corner-indicator.css b/themes/white/pace-theme-corner-indicator.css index b1670ce3..46320c34 100644 --- a/themes/white/pace-theme-corner-indicator.css +++ b/themes/white/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #ffffff; + background: var(--pace-color, #ffffff); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/white/pace-theme-fill-left.css b/themes/white/pace-theme-fill-left.css index ca746322..c0f91c36 100644 --- a/themes/white/pace-theme-fill-left.css +++ b/themes/white/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(255, 255, 255, 0.19999999999999996); + background-color: var(--pace-color, rgba(255, 255, 255, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/white/pace-theme-flash.css b/themes/white/pace-theme-flash.css index e3d458cc..cd305152 100644 --- a/themes/white/pace-theme-flash.css +++ b/themes/white/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #ffffff; + background: var(--pace-color, #ffffff); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #ffffff, 0 0 5px #ffffff; + box-shadow: 0 0 10px var(--pace-color, #ffffff), 0 0 5px var(--pace-color, #ffffff); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #ffffff; - border-left-color: #ffffff; + border-top-color: var(--pace-color, #ffffff); + border-left-color: var(--pace-color, #ffffff); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/white/pace-theme-flat-top.css b/themes/white/pace-theme-flat-top.css index 4e392ad6..9d368df8 100644 --- a/themes/white/pace-theme-flat-top.css +++ b/themes/white/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #ffffff; + background: var(--pace-color, #ffffff); pointer-events: none; } diff --git a/themes/white/pace-theme-loading-bar.css b/themes/white/pace-theme-loading-bar.css index ec57d2be..f7e3453e 100644 --- a/themes/white/pace-theme-loading-bar.css +++ b/themes/white/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #ffffff; - color: #ffffff; + background: var(--pace-color, #ffffff); + color: var(--pace-color, #ffffff); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #ffffff), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/white/pace-theme-mac-osx.css b/themes/white/pace-theme-mac-osx.css index a7c27e7e..e6a06ebd 100644 --- a/themes/white/pace-theme-mac-osx.css +++ b/themes/white/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #CCCCCC; + background-color: var(--pace-color, #CCCCCC); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #808080), inset 0 -1px var(--pace-color, #808080), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #808080), inset 0 -1px var(--pace-color, #808080), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #808080), inset 0 -1px var(--pace-color, #808080), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #808080), inset 0 -1px var(--pace-color, #808080), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/white/pace-theme-material.css b/themes/white/pace-theme-material.css index 85870ca0..81fbf383 100644 --- a/themes/white/pace-theme-material.css +++ b/themes/white/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #ffffff; + color: var(--pace-color, #ffffff); } .pace-progress { diff --git a/themes/white/pace-theme-minimal.css b/themes/white/pace-theme-minimal.css index 25c203a7..22c21078 100644 --- a/themes/white/pace-theme-minimal.css +++ b/themes/white/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #ffffff; + background: var(--pace-color, #ffffff); position: fixed; z-index: 2000; top: 0; diff --git a/themes/yellow/pace-theme-barber-shop.css b/themes/yellow/pace-theme-barber-shop.css index daaae2a4..24bd6e93 100644 --- a/themes/yellow/pace-theme-barber-shop.css +++ b/themes/yellow/pace-theme-barber-shop.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #fcd25a; + background-color: var(--pace-color, #fcd25a); position: fixed; top: 0; bottom: 0; diff --git a/themes/yellow/pace-theme-big-counter.css b/themes/yellow/pace-theme-big-counter.css index bb5f5294..893e418f 100644 --- a/themes/yellow/pace-theme-big-counter.css +++ b/themes/yellow/pace-theme-big-counter.css @@ -36,5 +36,5 @@ font-size: 5rem; line-height: 1; text-align: right; - color: rgba(252, 210, 90, 0.19999999999999996); + color: var(--pace-color, rgba(252, 210, 90, 0.19999999999999996)); } diff --git a/themes/yellow/pace-theme-bounce.css b/themes/yellow/pace-theme-bounce.css index e1707bc9..3bf009c6 100644 --- a/themes/yellow/pace-theme-bounce.css +++ b/themes/yellow/pace-theme-bounce.css @@ -30,7 +30,7 @@ width: 140px; height: 140px; border-radius: 70px; - background: #fcd25a; + background: var(--pace-color, #fcd25a); position: absolute; top: 0; z-index: 1911; diff --git a/themes/yellow/pace-theme-center-atom.css b/themes/yellow/pace-theme-center-atom.css index fe16659e..fc53a8ae 100644 --- a/themes/yellow/pace-theme-center-atom.css +++ b/themes/yellow/pace-theme-center-atom.css @@ -37,7 +37,7 @@ content: attr(data-progress-text); text-align: center; color: #fff; - background: #fcd25a; + background: var(--pace-color, #fcd25a); border-radius: 50%; font-family: "Helvetica Neue", sans-serif; font-size: 14px; @@ -69,7 +69,7 @@ .pace .pace-activity { border-radius: 50%; - border: 5px solid #fcd25a; + border: 5px solid var(--pace-color, #fcd25a); content: ' '; display: block; position: absolute; @@ -81,7 +81,7 @@ .pace .pace-activity:after { border-radius: 50%; - border: 5px solid #fcd25a; + border: 5px solid var(--pace-color, #fcd25a); content: ' '; display: block; position: absolute; @@ -98,7 +98,7 @@ .pace .pace-activity:before { border-radius: 50%; - border: 5px solid #fcd25a; + border: 5px solid var(--pace-color, #fcd25a); content: ' '; display: block; position: absolute; diff --git a/themes/yellow/pace-theme-center-circle.css b/themes/yellow/pace-theme-center-circle.css index bbda8bf1..c6dbc6e9 100644 --- a/themes/yellow/pace-theme-center-circle.css +++ b/themes/yellow/pace-theme-center-circle.css @@ -40,7 +40,7 @@ line-height: 6rem; font-size: 2rem; border-radius: 50%; - background: rgba(252, 210, 90, 0.8); + background: var(--pace-color, rgba(252, 210, 90, 0.8)); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; diff --git a/themes/yellow/pace-theme-center-radar.css b/themes/yellow/pace-theme-center-radar.css index 4e0c2f8f..3725a204 100644 --- a/themes/yellow/pace-theme-center-radar.css +++ b/themes/yellow/pace-theme-center-radar.css @@ -34,7 +34,7 @@ display: block; border-width: 30px; border-style: double; - border-color: #fcd25a transparent transparent; + border-color: var(--pace-color, #fcd25a) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; @@ -57,7 +57,7 @@ display: block; border-width: 10px; border-style: solid; - border-color: #fcd25a transparent transparent; + border-color: var(--pace-color, #fcd25a) transparent transparent; border-radius: 50%; -webkit-box-sizing: content-box; diff --git a/themes/yellow/pace-theme-center-simple.css b/themes/yellow/pace-theme-center-simple.css index 93b6f37d..659498a8 100644 --- a/themes/yellow/pace-theme-center-simple.css +++ b/themes/yellow/pace-theme-center-simple.css @@ -17,7 +17,7 @@ height: 5px; width: 200px; background: #fff; - border: 1px solid #fcd25a; + border: 1px solid var(--pace-color, #fcd25a); overflow: hidden; } @@ -44,7 +44,7 @@ right: 100%; height: 100%; width: 100%; - background: #fcd25a; + background: var(--pace-color, #fcd25a); } .pace.pace-inactive { diff --git a/themes/yellow/pace-theme-corner-indicator.css b/themes/yellow/pace-theme-corner-indicator.css index 82761899..a69dfaea 100644 --- a/themes/yellow/pace-theme-corner-indicator.css +++ b/themes/yellow/pace-theme-corner-indicator.css @@ -16,7 +16,7 @@ right: 0; width: 300px; height: 300px; - background: #fcd25a; + background: var(--pace-color, #fcd25a); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); diff --git a/themes/yellow/pace-theme-fill-left.css b/themes/yellow/pace-theme-fill-left.css index 03a2333a..717c1030 100644 --- a/themes/yellow/pace-theme-fill-left.css +++ b/themes/yellow/pace-theme-fill-left.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background-color: rgba(252, 210, 90, 0.19999999999999996); + background-color: var(--pace-color, rgba(252, 210, 90, 0.19999999999999996)); position: fixed; z-index: -1; top: 0; diff --git a/themes/yellow/pace-theme-flash.css b/themes/yellow/pace-theme-flash.css index 4c01ddfe..61ea32bc 100644 --- a/themes/yellow/pace-theme-flash.css +++ b/themes/yellow/pace-theme-flash.css @@ -12,7 +12,7 @@ } .pace .pace-progress { - background: #fcd25a; + background: var(--pace-color, #fcd25a); position: fixed; z-index: 2000; top: 0; @@ -27,7 +27,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #fcd25a, 0 0 5px #fcd25a; + box-shadow: 0 0 10px var(--pace-color, #fcd25a), 0 0 5px var(--pace-color, #fcd25a); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ width: 14px; height: 14px; border: solid 2px transparent; - border-top-color: #fcd25a; - border-left-color: #fcd25a; + border-top-color: var(--pace-color, #fcd25a); + border-left-color: var(--pace-color, #fcd25a); border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; diff --git a/themes/yellow/pace-theme-flat-top.css b/themes/yellow/pace-theme-flat-top.css index ba385028..27c96bb6 100644 --- a/themes/yellow/pace-theme-flat-top.css +++ b/themes/yellow/pace-theme-flat-top.css @@ -35,7 +35,7 @@ right: 100%; width: 100%; height: 10px; - background: #fcd25a; + background: var(--pace-color, #fcd25a); pointer-events: none; } diff --git a/themes/yellow/pace-theme-loading-bar.css b/themes/yellow/pace-theme-loading-bar.css index 43bb98db..27acaa18 100644 --- a/themes/yellow/pace-theme-loading-bar.css +++ b/themes/yellow/pace-theme-loading-bar.css @@ -59,8 +59,8 @@ top: 7px; height: 14px; font-size: 12px; - background: #fcd25a; - color: #fcd25a; + background: var(--pace-color, #fcd25a); + color: var(--pace-color, #fcd25a); line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; @@ -189,7 +189,7 @@ width: 100%; height: 28px; z-index: 2001; - box-shadow: inset 0 0 0 2px #fcd25a, inset 0 0 0 7px #FFF; + box-shadow: inset 0 0 0 2px var(--pace-color, #fcd25a), inset 0 0 0 7px #FFF; border-radius: 10px; } diff --git a/themes/yellow/pace-theme-mac-osx.css b/themes/yellow/pace-theme-mac-osx.css index ae0fa67b..befd2e2e 100644 --- a/themes/yellow/pace-theme-mac-osx.css +++ b/themes/yellow/pace-theme-mac-osx.css @@ -22,7 +22,7 @@ } .pace .pace-progress { - background-color: #FFE000; + background-color: var(--pace-color, #FFE000); position: fixed; top: 0; right: 100%; @@ -35,10 +35,10 @@ -o-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -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); - -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); - -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); - 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); + -webkit-box-shadow: inset -1px 0 var(--pace-color, #E49900), inset 0 -1px var(--pace-color, #E49900), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -moz-box-shadow: inset -1px 0 var(--pace-color, #E49900), inset 0 -1px var(--pace-color, #E49900), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + -o-box-shadow: inset -1px 0 var(--pace-color, #E49900), inset 0 -1px var(--pace-color, #E49900), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); + box-shadow: inset -1px 0 var(--pace-color, #E49900), inset 0 -1px var(--pace-color, #E49900), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3); } .pace .pace-activity { diff --git a/themes/yellow/pace-theme-material.css b/themes/yellow/pace-theme-material.css index 4d1ae848..a78d639a 100644 --- a/themes/yellow/pace-theme-material.css +++ b/themes/yellow/pace-theme-material.css @@ -7,7 +7,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - color: #fcd25a; + color: var(--pace-color, #fcd25a); } .pace-progress { diff --git a/themes/yellow/pace-theme-minimal.css b/themes/yellow/pace-theme-minimal.css index 02b080c7..3e369262 100644 --- a/themes/yellow/pace-theme-minimal.css +++ b/themes/yellow/pace-theme-minimal.css @@ -13,7 +13,7 @@ } .pace .pace-progress { - background: #fcd25a; + background: var(--pace-color, #fcd25a); position: fixed; z-index: 2000; top: 0;