From caea89039810962e1112d130398a1d8c33f4a77c Mon Sep 17 00:00:00 2001 From: dsuket Date: Fri, 26 Sep 2014 10:37:07 +0900 Subject: [PATCH 1/3] Changed duration of css transition to variable, and added fast theme. --- sass/_mixins.sass | 22 +++--- sass/odometer-theme-default-fast.sass | 14 ++++ themes/odometer-theme-default-fast.css | 92 ++++++++++++++++++++++++++ 3 files changed, 118 insertions(+), 10 deletions(-) create mode 100644 sass/odometer-theme-default-fast.sass create mode 100644 themes/odometer-theme-default-fast.css diff --git a/sass/_mixins.sass b/sass/_mixins.sass index 55ca7c0..928da10 100644 --- a/sass/_mixins.sass +++ b/sass/_mixins.sass @@ -1,5 +1,7 @@ @import compass/css3 +$duration: 2s + =spinning-odometer($themeName) .odometer.odometer-auto-theme, .odometer#{"." + $themeName} +inline-block @@ -40,11 +42,11 @@ &.odometer-animating-up .odometer-ribbon-inner - -webkit-transition: -webkit-transform 2s - -moz-transition: -moz-transform 2s - -ms-transition: -ms-transform 2s - -o-transition: -o-transform 2s - transition: transform 2s + -webkit-transition: -webkit-transform $duration + -moz-transition: -moz-transform $duration + -ms-transition: -ms-transform $duration + -o-transition: -o-transform $duration + transition: transform $duration &.odometer-animating .odometer-ribbon-inner -webkit-transform: translateY(-100%) @@ -63,11 +65,11 @@ transform: translateY(-100%) &.odometer-animating .odometer-ribbon-inner - -webkit-transition: -webkit-transform 2s - -moz-transition: -moz-transform 2s - -ms-transition: -ms-transform 2s - -o-transition: -o-transform 2s - transition: transform 2s + -webkit-transition: -webkit-transform $duration + -moz-transition: -moz-transform $duration + -ms-transition: -ms-transform $duration + -o-transition: -o-transform $duration + transition: transform $duration -webkit-transform: translateY(0) -moz-transform: translateY(0) diff --git a/sass/odometer-theme-default-fast.sass b/sass/odometer-theme-default-fast.sass new file mode 100644 index 0000000..b8c0475 --- /dev/null +++ b/sass/odometer-theme-default-fast.sass @@ -0,0 +1,14 @@ +@import compass/css3 +@import mixins + +$themeName: "odometer-theme-default" +$duration: 1s + ++spinning-odometer($themeName) + +.odometer.odometer-auto-theme, .odometer#{"." + $themeName} + font-family: "Helvetica Neue", sans-serif + line-height: 1.1em + + .odometer-value + text-align: center \ No newline at end of file diff --git a/themes/odometer-theme-default-fast.css b/themes/odometer-theme-default-fast.css new file mode 100644 index 0000000..0f65081 --- /dev/null +++ b/themes/odometer-theme-default-fast.css @@ -0,0 +1,92 @@ +.odometer.odometer-auto-theme, .odometer.odometer-theme-default { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + position: relative; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner { + text-align: left; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon { + display: block; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner { + display: block; + -webkit-backface-visibility: hidden; +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value { + display: block; + -webkit-transform: translateZ(0); +} +.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value { + position: absolute; +} +.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 1s; + -moz-transition: -moz-transform 1s; + -ms-transition: -ms-transform 1s; + -o-transition: -o-transform 1s; + transition: transform 1s; +} +.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -ms-transform: translateY(-100%); + -o-transform: translateY(-100%); + transform: translateY(-100%); +} +.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner { + -webkit-transition: -webkit-transform 1s; + -moz-transition: -moz-transform 1s; + -ms-transition: -ms-transform 1s; + -o-transition: -o-transform 1s; + transition: transform 1s; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.odometer.odometer-auto-theme, .odometer.odometer-theme-default { + font-family: "Helvetica Neue", sans-serif; + line-height: 1.1em; +} +.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value { + text-align: center; +} From b64384b69a257d8bf54c88f1e577c25ea59897fb Mon Sep 17 00:00:00 2001 From: dsuket Date: Fri, 26 Sep 2014 10:44:07 +0900 Subject: [PATCH 2/3] Update css theme by sass compiling --- themes/odometer-theme-car.css | 44 +++++++++--------------- themes/odometer-theme-default.css | 24 +++++-------- themes/odometer-theme-digital.css | 25 +++++--------- themes/odometer-theme-minimal.css | 24 +++++-------- themes/odometer-theme-plaza.css | 37 ++++++++------------ themes/odometer-theme-slot-machine.css | 45 +++++++++---------------- themes/odometer-theme-train-station.css | 38 ++++++++------------- 7 files changed, 87 insertions(+), 150 deletions(-) diff --git a/themes/odometer-theme-car.css b/themes/odometer-theme-car.css index 9deba53..1eb16a9 100644 --- a/themes/odometer-theme-car.css +++ b/themes/odometer-theme-car.css @@ -1,36 +1,30 @@ @import url("//fonts.googleapis.com/css?family=Arimo"); .odometer.odometer-auto-theme, .odometer.odometer-theme-car { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme, .odometer.odometer-theme-car { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - visibility: hidden; -} -.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer { + zoom: 1; *display: inline; + visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner { text-align: left; @@ -91,11 +85,10 @@ } .odometer.odometer-auto-theme, .odometer.odometer-theme-car { - -moz-border-radius: 0.34em; -webkit-border-radius: 0.34em; - -o-border-radius: 0.34em; + -moz-border-radius: 0.34em; -ms-border-radius: 0.34em; - -khtml-border-radius: 0.34em; + -o-border-radius: 0.34em; border-radius: 0.34em; font-family: "Arimo", monospace; padding: 0.15em; @@ -103,38 +96,33 @@ color: #eee0d3; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit { - -moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); - -o-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); + -moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(40%, #333333), color-stop(60%, #101010), color-stop(80%, #333333), color-stop(100%, #333333)); background-image: -webkit-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); background-image: -moz-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); background-image: -o-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); - background-image: -ms-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); background-image: linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); padding: 0 0.15em; } .odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-car .odometer-digit:first-child { - -moz-border-radius: 0.2em 0 0 0.2em; -webkit-border-radius: 0.2em 0 0 0.2em; - -o-border-radius: 0.2em 0 0 0.2em; + -moz-border-radius: 0.2em 0 0 0.2em; -ms-border-radius: 0.2em 0 0 0.2em; - -khtml-border-radius: 0.2em 0 0 0.2em; + -o-border-radius: 0.2em 0 0 0.2em; border-radius: 0.2em 0 0 0.2em; } .odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-car .odometer-digit:last-child { - -moz-border-radius: 0 0.2em 0.2em 0; -webkit-border-radius: 0 0.2em 0.2em 0; - -o-border-radius: 0 0.2em 0.2em 0; + -moz-border-radius: 0 0.2em 0.2em 0; -ms-border-radius: 0 0.2em 0.2em 0; - -khtml-border-radius: 0 0.2em 0.2em 0; + -o-border-radius: 0 0.2em 0.2em 0; border-radius: 0 0.2em 0.2em 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee0d3), color-stop(40%, #eee0d3), color-stop(60%, #bbaa9a), color-stop(80%, #eee0d3), color-stop(100%, #eee0d3)); background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); background-image: -moz-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); background-image: -o-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); - background-image: -ms-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); background-image: linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); background-color: #eee0d3; color: black; diff --git a/themes/odometer-theme-default.css b/themes/odometer-theme-default.css index 571de28..e31f3fe 100644 --- a/themes/odometer-theme-default.css +++ b/themes/odometer-theme-default.css @@ -1,35 +1,29 @@ .odometer.odometer-auto-theme, .odometer.odometer-theme-default { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme, .odometer.odometer-theme-default { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - visibility: hidden; -} -.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { + zoom: 1; *display: inline; + visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner { text-align: left; diff --git a/themes/odometer-theme-digital.css b/themes/odometer-theme-digital.css index ea79ab5..e492c45 100644 --- a/themes/odometer-theme-digital.css +++ b/themes/odometer-theme-digital.css @@ -1,36 +1,30 @@ @import url("//fonts.googleapis.com/css?family=Wallpoet"); .odometer.odometer-auto-theme, .odometer.odometer-theme-digital { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme, .odometer.odometer-theme-digital { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - visibility: hidden; -} -.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer { + zoom: 1; *display: inline; + visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-inner { text-align: left; @@ -95,7 +89,6 @@ background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000); background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000); background-image: -o-radial-gradient(rgba(139, 245, 165, 0.4), #000000); - background-image: -ms-radial-gradient(rgba(139, 245, 165, 0.4), #000000); background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000); background-color: black; font-family: "Wallpoet", monospace; diff --git a/themes/odometer-theme-minimal.css b/themes/odometer-theme-minimal.css index 8bab775..0e47aef 100644 --- a/themes/odometer-theme-minimal.css +++ b/themes/odometer-theme-minimal.css @@ -1,35 +1,29 @@ .odometer.odometer-auto-theme, .odometer.odometer-theme-minimal { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - visibility: hidden; -} -.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer { + zoom: 1; *display: inline; + visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner { text-align: left; diff --git a/themes/odometer-theme-plaza.css b/themes/odometer-theme-plaza.css index 813101f..2f3f96a 100644 --- a/themes/odometer-theme-plaza.css +++ b/themes/odometer-theme-plaza.css @@ -1,36 +1,29 @@ -@import url("//fonts.googleapis.com/css?family=Arimo"); .odometer.odometer-auto-theme, .odometer.odometer-theme-plaza { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - visibility: hidden; -} -.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer { + zoom: 1; *display: inline; + visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner { text-align: left; @@ -91,13 +84,12 @@ } .odometer.odometer-auto-theme, .odometer.odometer-theme-plaza { - -moz-border-radius: 0.15em; -webkit-border-radius: 0.15em; - -o-border-radius: 0.15em; + -moz-border-radius: 0.15em; -ms-border-radius: 0.15em; - -khtml-border-radius: 0.15em; + -o-border-radius: 0.15em; border-radius: 0.15em; - background-color: #f0f8ff; + background-color: aliceblue; font-family: "Helvetica Neue", sans-serif; font-weight: 100; padding: 0 0.12em; @@ -106,11 +98,10 @@ background-size: 16px 16px; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit { - -moz-border-radius: 0.1em; -webkit-border-radius: 0.1em; - -o-border-radius: 0.1em; + -moz-border-radius: 0.1em; -ms-border-radius: 0.1em; - -khtml-border-radius: 0.1em; + -o-border-radius: 0.1em; border-radius: 0.1em; padding: 0 0.03em; color: #648baf; diff --git a/themes/odometer-theme-slot-machine.css b/themes/odometer-theme-slot-machine.css index 90f60e8..08de532 100644 --- a/themes/odometer-theme-slot-machine.css +++ b/themes/odometer-theme-slot-machine.css @@ -1,36 +1,30 @@ @import url("//fonts.googleapis.com/css?family=Rye"); .odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - visibility: hidden; -} -.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer { + zoom: 1; *display: inline; + visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner { text-align: left; @@ -91,17 +85,15 @@ } .odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine { - -moz-border-radius: 0.34em; -webkit-border-radius: 0.34em; - -o-border-radius: 0.34em; + -moz-border-radius: 0.34em; -ms-border-radius: 0.34em; - -khtml-border-radius: 0.34em; + -o-border-radius: 0.34em; border-radius: 0.34em; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #ffa500)); background-image: -webkit-linear-gradient(#ffff00, #ffa500); background-image: -moz-linear-gradient(#ffff00, #ffa500); background-image: -o-linear-gradient(#ffff00, #ffa500); - background-image: -ms-linear-gradient(#ffff00, #ffa500); background-image: linear-gradient(#ffff00, #ffa500); background-color: #ffcc00; font-family: "Rye", monospace; @@ -112,35 +104,30 @@ -webkit-text-stroke: 0.05em black; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit { - -moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -o-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; - -o-border-radius: 0.2em; + -moz-border-radius: 0.2em; -ms-border-radius: 0.2em; - -khtml-border-radius: 0.2em; + -o-border-radius: 0.2em; border-radius: 0.2em; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(20%, #ffffff), color-stop(80%, #ffffff), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); background-image: -moz-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); background-image: -o-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); - background-image: -ms-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); background-image: linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); border: 0.03em solid #444444; padding: 0.1em 0.15em 0; } .odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-slot-machine .odometer-digit:first-child { - -moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -o-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); } .odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-slot-machine .odometer-digit:last-child { - -moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -o-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); } .odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit + .odometer-digit { diff --git a/themes/odometer-theme-train-station.css b/themes/odometer-theme-train-station.css index 29e1a4f..64360b4 100644 --- a/themes/odometer-theme-train-station.css +++ b/themes/odometer-theme-train-station.css @@ -1,36 +1,30 @@ @import url("//fonts.googleapis.com/css?family=Economica"); .odometer.odometer-auto-theme, .odometer.odometer-theme-train-station { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - position: relative; -} -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { + zoom: 1; *display: inline; + position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-spacer { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - visibility: hidden; -} -.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-spacer { + zoom: 1; *display: inline; + visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner { text-align: left; @@ -94,30 +88,26 @@ font-family: "Economica", sans-serif; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { - display: -moz-inline-box; - -moz-box-orient: vertical; + display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - -moz-border-radius: 0.1em; + zoom: 1; + *display: inline; -webkit-border-radius: 0.1em; - -o-border-radius: 0.1em; + -moz-border-radius: 0.1em; -ms-border-radius: 0.1em; - -khtml-border-radius: 0.1em; + -o-border-radius: 0.1em; border-radius: 0.1em; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(35%, #111111), color-stop(55%, #333333), color-stop(55%, #111111), color-stop(100%, #111111)); background-image: -webkit-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); background-image: -moz-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); background-image: -o-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); - background-image: -ms-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); background-image: linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); background-color: #222222; padding: 0 0.15em; color: white; } -.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { - *display: inline; -} .odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit + .odometer-digit { margin-left: 0.1em; } From 9c53d84fef7c6faaf4a7627e0f3b2781d856c3ef Mon Sep 17 00:00:00 2001 From: dsuket Date: Fri, 26 Sep 2014 11:21:11 +0900 Subject: [PATCH 3/3] Changed use transition/translate mixins, and upgrade compass 1.0.1 --- sass/_mixins.sass | 32 +++-------- themes/odometer-theme-car.css | 56 ++++++++------------ themes/odometer-theme-default-fast.css | 24 +++------ themes/odometer-theme-default.css | 24 +++------ themes/odometer-theme-digital.css | 32 +++++------ themes/odometer-theme-minimal.css | 24 +++------ themes/odometer-theme-plaza.css | 34 ++++-------- themes/odometer-theme-slot-machine.css | 70 +++++++++++-------------- themes/odometer-theme-train-station.css | 42 ++++++--------- 9 files changed, 121 insertions(+), 217 deletions(-) diff --git a/sass/_mixins.sass b/sass/_mixins.sass index 928da10..f62abcc 100644 --- a/sass/_mixins.sass +++ b/sass/_mixins.sass @@ -42,37 +42,17 @@ $duration: 2s &.odometer-animating-up .odometer-ribbon-inner - -webkit-transition: -webkit-transform $duration - -moz-transition: -moz-transform $duration - -ms-transition: -ms-transform $duration - -o-transition: -o-transform $duration - transition: transform $duration + +single-transition(transform, $duration) &.odometer-animating .odometer-ribbon-inner - -webkit-transform: translateY(-100%) - -moz-transform: translateY(-100%) - -ms-transform: translateY(-100%) - -o-transform: translateY(-100%) - transform: translateY(-100%) + +translateY(-100%) &.odometer-animating-down .odometer-ribbon-inner - -webkit-transform: translateY(-100%) - -moz-transform: translateY(-100%) - -ms-transform: translateY(-100%) - -o-transform: translateY(-100%) - transform: translateY(-100%) + +translateY(-100%) &.odometer-animating .odometer-ribbon-inner - -webkit-transition: -webkit-transform $duration - -moz-transition: -moz-transform $duration - -ms-transition: -ms-transform $duration - -o-transition: -o-transform $duration - transition: transform $duration - - -webkit-transform: translateY(0) - -moz-transform: translateY(0) - -ms-transform: translateY(0) - -o-transform: translateY(0) - transform: translateY(0) \ No newline at end of file + +single-transition(transform, $duration) + + +translateY(0) diff --git a/themes/odometer-theme-car.css b/themes/odometer-theme-car.css index 1eb16a9..65b169a 100644 --- a/themes/odometer-theme-car.css +++ b/themes/odometer-theme-car.css @@ -1,28 +1,25 @@ @import url("//fonts.googleapis.com/css?family=Arimo"); .odometer.odometer-auto-theme, .odometer.odometer-theme-car { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -51,81 +48,72 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } .odometer.odometer-auto-theme, .odometer.odometer-theme-car { - -webkit-border-radius: 0.34em; -moz-border-radius: 0.34em; - -ms-border-radius: 0.34em; - -o-border-radius: 0.34em; + -webkit-border-radius: 0.34em; border-radius: 0.34em; font-family: "Arimo", monospace; padding: 0.15em; - background: black; + background: #000; color: #eee0d3; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit { - -webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); -moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); + -webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMzMzMzMzIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMxMDEwMTAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(40%, #333333), color-stop(60%, #101010), color-stop(80%, #333333), color-stop(100%, #333333)); - background-image: -webkit-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); background-image: -moz-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); - background-image: -o-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); - background-image: linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); + background-image: -webkit-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); + background-image: linear-gradient(to bottom, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%); padding: 0 0.15em; } .odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-car .odometer-digit:first-child { - -webkit-border-radius: 0.2em 0 0 0.2em; -moz-border-radius: 0.2em 0 0 0.2em; - -ms-border-radius: 0.2em 0 0 0.2em; - -o-border-radius: 0.2em 0 0 0.2em; + -webkit-border-radius: 0.2em; border-radius: 0.2em 0 0 0.2em; } .odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-car .odometer-digit:last-child { - -webkit-border-radius: 0 0.2em 0.2em 0; -moz-border-radius: 0 0.2em 0.2em 0; - -ms-border-radius: 0 0.2em 0.2em 0; - -o-border-radius: 0 0.2em 0.2em 0; + -webkit-border-radius: 0; border-radius: 0 0.2em 0.2em 0; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZWVlMGQzIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNiYmFhOWEiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee0d3), color-stop(40%, #eee0d3), color-stop(60%, #bbaa9a), color-stop(80%, #eee0d3), color-stop(100%, #eee0d3)); - background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); background-image: -moz-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); - background-image: -o-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); - background-image: linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); + background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); + background-image: linear-gradient(to bottom, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%); background-color: #eee0d3; - color: black; + color: #000; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner { left: 0.15em; diff --git a/themes/odometer-theme-default-fast.css b/themes/odometer-theme-default-fast.css index 0f65081..66d2645 100644 --- a/themes/odometer-theme-default-fast.css +++ b/themes/odometer-theme-default-fast.css @@ -1,27 +1,24 @@ .odometer.odometer-auto-theme, .odometer.odometer-theme-default { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -50,36 +47,31 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; - -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; + -webkit-transition: -webkit-transform 1s; transition: transform 1s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; - -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; + -webkit-transition: -webkit-transform 1s; transition: transform 1s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } diff --git a/themes/odometer-theme-default.css b/themes/odometer-theme-default.css index e31f3fe..a807174 100644 --- a/themes/odometer-theme-default.css +++ b/themes/odometer-theme-default.css @@ -1,27 +1,24 @@ .odometer.odometer-auto-theme, .odometer.odometer-theme-default { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -50,36 +47,31 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } diff --git a/themes/odometer-theme-digital.css b/themes/odometer-theme-digital.css index e492c45..ef021fa 100644 --- a/themes/odometer-theme-digital.css +++ b/themes/odometer-theme-digital.css @@ -1,28 +1,25 @@ @import url("//fonts.googleapis.com/css?family=Wallpoet"); .odometer.odometer-auto-theme, .odometer.odometer-theme-digital { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -51,46 +48,41 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } .odometer.odometer-auto-theme, .odometer.odometer-theme-digital { - background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(139, 245, 165, 0.4)), color-stop(100%, #000000)); - background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiZjVhNSIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); + background-size: 100%; background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000); - background-image: -o-radial-gradient(rgba(139, 245, 165, 0.4), #000000); + background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000); background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000); - background-color: black; + background-color: #000; font-family: "Wallpoet", monospace; padding: 0 0.2em; line-height: 1.1em; diff --git a/themes/odometer-theme-minimal.css b/themes/odometer-theme-minimal.css index 0e47aef..81be831 100644 --- a/themes/odometer-theme-minimal.css +++ b/themes/odometer-theme-minimal.css @@ -1,27 +1,24 @@ .odometer.odometer-auto-theme, .odometer.odometer-theme-minimal { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -50,35 +47,30 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } diff --git a/themes/odometer-theme-plaza.css b/themes/odometer-theme-plaza.css index 2f3f96a..3d6ccc6 100644 --- a/themes/odometer-theme-plaza.css +++ b/themes/odometer-theme-plaza.css @@ -1,27 +1,24 @@ .odometer.odometer-auto-theme, .odometer.odometer-theme-plaza { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -50,46 +47,39 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } .odometer.odometer-auto-theme, .odometer.odometer-theme-plaza { - -webkit-border-radius: 0.15em; -moz-border-radius: 0.15em; - -ms-border-radius: 0.15em; - -o-border-radius: 0.15em; + -webkit-border-radius: 0.15em; border-radius: 0.15em; - background-color: aliceblue; + background-color: #f0f8ff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; padding: 0 0.12em; @@ -98,10 +88,8 @@ background-size: 16px 16px; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit { - -webkit-border-radius: 0.1em; -moz-border-radius: 0.1em; - -ms-border-radius: 0.1em; - -o-border-radius: 0.1em; + -webkit-border-radius: 0.1em; border-radius: 0.1em; padding: 0 0.03em; color: #648baf; diff --git a/themes/odometer-theme-slot-machine.css b/themes/odometer-theme-slot-machine.css index 08de532..6b74c9b 100644 --- a/themes/odometer-theme-slot-machine.css +++ b/themes/odometer-theme-slot-machine.css @@ -1,28 +1,25 @@ @import url("//fonts.googleapis.com/css?family=Rye"); .odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -51,84 +48,77 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } .odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine { - -webkit-border-radius: 0.34em; -moz-border-radius: 0.34em; - -ms-border-radius: 0.34em; - -o-border-radius: 0.34em; + -webkit-border-radius: 0.34em; border-radius: 0.34em; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYTUwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #ffa500)); - background-image: -webkit-linear-gradient(#ffff00, #ffa500); background-image: -moz-linear-gradient(#ffff00, #ffa500); - background-image: -o-linear-gradient(#ffff00, #ffa500); + background-image: -webkit-linear-gradient(#ffff00, #ffa500); background-image: linear-gradient(#ffff00, #ffa500); - background-color: #ffcc00; + background-color: #fc0; font-family: "Rye", monospace; padding: 0.15em; color: #f80000; line-height: 1.35em; - border: 0.03em solid black; - -webkit-text-stroke: 0.05em black; + border: 0.03em solid #000; + -webkit-text-stroke: 0.05em #000; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit { - -webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -webkit-border-radius: 0.2em; + -moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); -moz-border-radius: 0.2em; - -ms-border-radius: 0.2em; - -o-border-radius: 0.2em; + -webkit-border-radius: 0.2em; border-radius: 0.2em; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); + background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(20%, #ffffff), color-stop(80%, #ffffff), color-stop(100%, #cccccc)); - background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); background-image: -moz-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); - background-image: -o-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); - background-image: linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); - border: 0.03em solid #444444; + background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); + background-image: linear-gradient(to bottom, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); + border: 0.03em solid #444; padding: 0.1em 0.15em 0; } .odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-slot-machine .odometer-digit:first-child { - -webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); } .odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-slot-machine .odometer-digit:last-child { - -webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); - box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); + box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2); } .odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit + .odometer-digit { margin-left: 0.15em; diff --git a/themes/odometer-theme-train-station.css b/themes/odometer-theme-train-station.css index 64360b4..007afd8 100644 --- a/themes/odometer-theme-train-station.css +++ b/themes/odometer-theme-train-station.css @@ -1,28 +1,25 @@ @import url("//fonts.googleapis.com/css?family=Economica"); .odometer.odometer-auto-theme, .odometer.odometer-theme-train-station { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-spacer { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; visibility: hidden; } @@ -51,36 +48,31 @@ position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up.odometer-animating .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down .odometer-ribbon-inner { - -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); + -webkit-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down.odometer-animating .odometer-ribbon-inner { - -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; - -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; + -webkit-transition: -webkit-transform 2s; transition: transform 2s; - -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); - -o-transform: translateY(0); + -webkit-transform: translateY(0); transform: translateY(0); } @@ -88,25 +80,23 @@ font-family: "Economica", sans-serif; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { - display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; - zoom: 1; + *zoom: 1; *display: inline; - -webkit-border-radius: 0.1em; -moz-border-radius: 0.1em; - -ms-border-radius: 0.1em; - -o-border-radius: 0.1em; + -webkit-border-radius: 0.1em; border-radius: 0.1em; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMzUlIiBzdG9wLWNvbG9yPSIjMTExMTExIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(35%, #111111), color-stop(55%, #333333), color-stop(55%, #111111), color-stop(100%, #111111)); - background-image: -webkit-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); background-image: -moz-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); - background-image: -o-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); - background-image: linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); - background-color: #222222; + background-image: -webkit-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); + background-image: linear-gradient(to bottom, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%); + background-color: #222; padding: 0 0.15em; - color: white; + color: #fff; } .odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit + .odometer-digit { margin-left: 0.1em;