├── .gitignore ├── package.json ├── Gruntfile.js ├── js ├── jq.stopwatch.min.js └── jq.stopwatch.js ├── index.html ├── readme.md └── css ├── jq.stopwatch.min.css └── jq.stopwatch.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jq.stopwatch", 3 | "version": "0.0.1", 4 | "author": "kellishaver", 5 | "description": "", 6 | "engines": { 7 | "node": ">= 0.10.0" 8 | }, 9 | "devDependencies": { 10 | "grunt": "~0.4.2", 11 | "grunt-esformatter": "~0.2.3", 12 | "grunt-contrib-uglify": "~0.2.7" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /*global module:false*/ 2 | module.exports = function(grunt) { 3 | // Project configuration. 4 | grunt.initConfig({ 5 | // Metadata. 6 | pkg: grunt.file.readJSON('package.json'), 7 | // Task configuration. 8 | esformatter: { 9 | src: 'js/jq.stopwatch.js' 10 | }, 11 | uglify: { 12 | dist: { 13 | src: 'js/jq.stopwatch.js', 14 | dest: 'js/jq.stopwatch.min.js' 15 | } 16 | } 17 | }); 18 | 19 | // These plugins provide necessary tasks. 20 | grunt.loadNpmTasks('grunt-esformatter'); 21 | grunt.loadNpmTasks('grunt-contrib-uglify'); 22 | 23 | // Default task. 24 | grunt.registerTask('default', ['esformatter', 'uglify']); 25 | 26 | }; 27 | -------------------------------------------------------------------------------- /js/jq.stopwatch.min.js: -------------------------------------------------------------------------------- 1 | !function(a){a.fn.stopwatch=function(b){b=jQuery.extend({theme:null,persistKey:null,start:null,stop:null,reset:null},b);var c=a(this);c.addClass("stopwatch").addClass(b.theme),c.each(function(){function d(){var a=parseFloat(h.text()),b=parseFloat(i.text()),c=parseFloat(j.text());c++,c>59&&(c=0,b+=1),b>59&&(b=0,a+=1),h.html("0".substring(a>=10)+a),i.html("0".substring(b>=10)+b),j.html("0".substring(c>=10)+c)}var e=a(this),f=0,g=a("
").addClass("the-time"),h=a("").addClass("hr").text("00"),i=a("").addClass("min").text("00"),j=a("").addClass("sec").text("00");if("string"==typeof b.persistKey){var k=localStorage["_jq.stopwatch."+b.persistKey]?JSON.parse(localStorage["_jq.stopwatch."+b.persistKey]):null;null!==k&&(h.text(k.hr),i.text(k.min),j.text(k.sec))}var l=a("").attr("href","").addClass("start-stop").text("Start"),m=a("").attr("href","").addClass("reset").text("Reset");g=g.append(h).append(i).append(j),e.html("").append(g).append(l).append(m),l.bind("click",function(e){e.preventDefault();var g=a(this);"Start"===g.text()?(b.start&&b.start(c),f=setInterval(d,1e3),g.text("Stop")):(b.stop&&b.stop(c),clearInterval(f),g.text("Start"))}),m.bind("click",function(a){a.preventDefault(),b.reset&&b.reset(c),clearInterval(f),l.text("Start"),f=0,h.text("00"),i.text("00"),j.text("00")});var n=function(){return{hr:h.text(),min:i.text(),sec:j.text()}},o=function(){localStorage["_jq.stopwatch."+b.persistKey]=JSON.stringify(n())};"string"==typeof b.persistKey&&window.addEventListener("beforeunload",function(){o()})})}}(jQuery); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Stopwatch Widget 5 | 6 | 7 | 8 | 9 | 22 | 23 | 24 | 25 |

Theme 1

26 |
27 |
28 |
29 |

Theme 2

30 |
31 |
32 |

Theme 3

33 |
34 |
35 |

Theme 4

36 |
37 |
38 |

Theme 5

39 |
40 |
41 |

Theme 6

42 |
43 |
44 |

Theme 7

45 |
46 |
47 |

Theme 8

48 |
49 |
50 |

Theme 9

51 |
52 |
53 |

Theme 10

54 |
55 | 56 | 76 | 77 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | jQuery Stopwatch Widget 2 | ==== 3 | 4 | This widget allows you to quickly and easily add a stopwatch to your page. It's great for invoicing software, project management applications, quizzes— anywhere that you need to track time. 5 | 6 | ###Usage 7 | 8 | Getting started is very simple. First, include the stopwatch CSS file and the JavaScript file in your document HEAD. If you're not already using jQuery, you'll need to include this, as well. 9 | 10 | In production, it's a good idea to use the included minified versions of the theme CSS and the stopwatch widget JavaScript file. 11 | 12 | 13 | 14 | 15 | 16 | Next, inside of your document, where you would like the stopwatch to be placed, insert a container DIV. 17 | 18 |
19 | 20 | Now, at the end of your document, just before the closing BODY tag, initialize the stopwatch. 21 | 22 | 27 | 28 | ###Themes 29 | 30 | The stopwatch widget includes 10 CSS3 themes (`theme-1` through `theme-10`). These themes are designed to work in modern browsers and should work in older versions of IE when a polyfill such as modernizr is used. 31 | 32 | If you wish to create your own theme, you have a couple of options: 33 | 34 | 1. Create the new theme and pass it to the `.stopwatch()` function when you initialize the stopwatch. 35 | 2. Create a theme in your own CSS that simply references your `#myStopwatch` div and its child elements, passing a blank string in the `.stopwatch()` function. 36 | 37 | Creating a theme is fairly straightforward. Below is the generated HTML that the stopwatch widget creates, for your reference. More information about theme structure can be found at the top of the `jq.stopwatch.css` file. 38 | 39 |
40 |
41 | 000000 45 | Start 46 | Reset 47 |
48 | 49 | ###Multiple Instances 50 | 51 | Note that you can also include multiple instances of the stopwatch widget on a single page. For instance: 52 | 53 |
54 |
55 | 56 | 62 | 63 | If you're initializing all stopwatches with the same theme, you can combine selectors: 64 | 65 | 70 | 71 | Or give them a shared class name: 72 | 73 |
74 | 75 | 80 | 81 | ###Questions? 82 | 83 | Questions, comments, or concerns? Feel free to email me at kelli@kellishaver.com or Twitter [@kellishaver](http://twitter.com/kellishaver). 84 | -------------------------------------------------------------------------------- /js/jq.stopwatch.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.fn.stopwatch = function(o) { 3 | o = jQuery.extend({ 4 | theme: null, 5 | persistKey: null, 6 | start: null, 7 | stop: null, 8 | reset: null, 9 | }, o); 10 | var stopwatch = $(this); 11 | stopwatch.addClass('stopwatch').addClass(o.theme); 12 | 13 | stopwatch.each(function() { 14 | var instance = $(this); 15 | var timer = 0; 16 | 17 | var stopwatchFace = $('
').addClass('the-time'); 18 | var timeHour = $('').addClass('hr').text('00'); 19 | var timeMin = $('').addClass('min').text('00'); 20 | var timeSec = $('').addClass('sec').text('00'); 21 | if (typeof(o.persistKey) === 'string') { 22 | var lastState = localStorage['_jq.stopwatch.' + o.persistKey] ? JSON.parse(localStorage['_jq.stopwatch.' + o.persistKey]) : null; 23 | if (lastState !== null) { 24 | timeHour.text(lastState.hr); 25 | timeMin.text(lastState.min); 26 | timeSec.text(lastState.sec); 27 | } 28 | } 29 | var startStopBtn = $('').attr('href', '').addClass('start-stop').text('Start'); 30 | var resetBtn = $('').attr('href', '').addClass('reset').text('Reset'); 31 | stopwatchFace = stopwatchFace.append(timeHour).append(timeMin).append(timeSec); 32 | instance.html('').append(stopwatchFace).append(startStopBtn).append(resetBtn); 33 | 34 | startStopBtn.bind('click', function(e) { 35 | e.preventDefault(); 36 | var button = $(this); 37 | if (button.text() === 'Start') { 38 | if (o.start) { 39 | o.start(stopwatch); 40 | } 41 | timer = setInterval(runStopwatch, 1000); 42 | button.text('Stop'); 43 | } else { 44 | if (o.stop) { 45 | o.stop(stopwatch); 46 | } 47 | clearInterval(timer); 48 | button.text('Start'); 49 | } 50 | }); 51 | 52 | resetBtn.bind('click', function(e) { 53 | e.preventDefault(); 54 | if (o.reset) { 55 | o.reset(stopwatch); 56 | } 57 | clearInterval(timer); 58 | startStopBtn.text('Start'); 59 | timer = 0; 60 | timeHour.text('00'); 61 | timeMin.text('00'); 62 | timeSec.text('00'); 63 | }); 64 | 65 | function runStopwatch() { 66 | // We need to get the current time value within the widget. 67 | var hour = parseFloat(timeHour.text()); 68 | var minute = parseFloat(timeMin.text()); 69 | var second = parseFloat(timeSec.text()); 70 | 71 | second++; 72 | 73 | if (second > 59) { 74 | second = 0; 75 | minute = minute + 1; 76 | } 77 | 78 | if (minute > 59) { 79 | minute = 0; 80 | hour = hour + 1; 81 | } 82 | 83 | timeHour.html("0".substring(hour >= 10) + hour); 84 | timeMin.html("0".substring(minute >= 10) + minute); 85 | timeSec.html("0".substring(second >= 10) + second); 86 | } 87 | 88 | var getTime = function() { 89 | return { 90 | hr: timeHour.text(), 91 | min: timeMin.text(), 92 | sec: timeSec.text() 93 | }; 94 | }; 95 | 96 | var saveState = function() { 97 | localStorage['_jq.stopwatch.' + o.persistKey] = JSON.stringify(getTime()); 98 | }; 99 | 100 | if (typeof(o.persistKey) === 'string') { 101 | window.addEventListener('beforeunload', function() { 102 | saveState(); 103 | }); 104 | } 105 | }); 106 | } 107 | })(jQuery); -------------------------------------------------------------------------------- /css/jq.stopwatch.min.css: -------------------------------------------------------------------------------- 1 | @import 'http://fonts.googleapis.com/css?family=Quantico|Cabin+Condensed|Dosis|Electrolize|Spinnaker|Francois+One|Iceberg|Share|Tulpen+One|Wallpoet'; .stopwatch.theme-1 { border: 1px solid #aaa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100% #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: linear-gradient(top, #eeeeee 0%, #cccccc 100%); height: auto; overflow: hidden; padding: 1em; position: relative; width: 200px; } .stopwatch.theme-1 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-1 .the-time { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 1px 1px 0 #ffffff; -moz-box-shadow: 1px 1px 0 #ffffff; box-shadow: 1px 1px 0 #ffffff; color: #fff; font-family: 'Quantico', sans-serif; font-size: 20px; margin-bottom: 10px; padding: 10px; background-color: #555555; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); background-image: linear-gradient(top, #222222 0%, #555555 100%); text-align: center; } .stopwatch.theme-1 .min:before { content: ':' } .stopwatch.theme-1 .min:after { content: ':' } .stopwatch.theme-1 .reset, .stopwatch.theme-1 .start-stop { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); color: #fff; display: inline-block; font-weight: bold; font-size: 11px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; width: 80px; } .stopwatch.theme-1 .reset:active, .stopwatch.theme-1 .start-stop:active { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .stopwatch.theme-1 .reset:hover, .stopwatch.theme-1 .start-stop:hover { text-shadow: 0 0 4px rgba(255, 255, 255, 0.6) } .stopwatch.theme-1 .reset { background: #ff3019; background: -moz-linear-gradient(top, #ff3019 1%, #aa0306 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ff3019), color-stop(100%, #aa0306)); background: -webkit-linear-gradient(top, #ff3019 1%, #aa0306 100%); background: -o-linear-gradient(top, #ff3019 1%, #aa0306 100%); background: -ms-linear-gradient(top, #ff3019 1%, #aa0306 100%); background: linear-gradient(to bottom, #ff3019 1%, #aa0306 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff3019', endColorstr='#aa0306', GradientType=0); float: right; } .stopwatch.theme-1 .start-stop { background: #61cd30; background: -moz-linear-gradient(top, #88cd02 0%, #7bba00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #88cd02), color-stop(100%, #7bba00)); background: -webkit-linear-gradient(top, #88cd02 0%, #7bba00 100%); background: -o-linear-gradient(top, #88cd02 0%, #7bba00 100%); background: -ms-linear-gradient(top, #88cd02 0%, #7bba00 100%); background: linear-gradient(to bottom, #88cd02 0%, #7bba00 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#88cd02', endColorstr='#7bba00', GradientType=0); float: left; } .stopwatch.theme-2 { border: 1px solid #aaa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; background-color: #222222; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100% #222222)); background-image: -webkit-linear-gradient(top, #555555 0%, #222222 100%); background-image: -moz-linear-gradient(top, #555555 0%, #222222 100%); background-image: -ms-linear-gradient(top, #555555 0%, #222222 100%); background-image: -o-linear-gradient(top, #555555 0%, #222222 100%); background-image: linear-gradient(top, #555555 0%, #222222 100%); height: auto; overflow: hidden; padding: 1em; position: relative; width: 200px; } .stopwatch.theme-2 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-2 .the-time { border: 1px solid #777; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 2px 2px 2px #000000; -moz-box-shadow: 2px 2px 2px #000000; box-shadow: 2px 2px 2px #000000; color: #71b8ee; font-family: 'Cabin Condensed', sans-serif; font-size: 20px; margin-bottom: 10px; padding: 10px; background-color: #555555; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); background-image: linear-gradient(top, #222222 0%, #555555 100%); text-align: center; } .stopwatch.theme-2 .min:before { content: ':' } .stopwatch.theme-2 .min:after { content: ':' } .stopwatch.theme-2 .reset, .stopwatch.theme-2 .start-stop { background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #959595), color-stop(46%, #0d0d0d), color-stop(50%, #010101), color-stop(53%, #0a0a0a), color-stop(76%, #4e4e4e), color-stop(87%, #383838), color-stop(100%, #1b1b1b)); background: -webkit-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); background: -o-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); background: -ms-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); background: linear-gradient(to bottom, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#959595', endColorstr='#1b1b1b', GradientType=0); border-top: 1px solid #4f4f4f; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); color: #ddd; display: inline-block; font-weight: bold; font-size: 11px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; width: 80px; } .stopwatch.theme-2 .reset:active, .stopwatch.theme-2 .start-stop:active { background: #45484d; background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000000)); background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%); background: -o-linear-gradient(top, #45484d 0%, #000000 100%); background: -ms-linear-gradient(top, #45484d 0%, #000000 100%); background: linear-gradient(to bottom, #45484d 0%, #000000 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .stopwatch.theme-2 .reset:hover, .stopwatch.theme-2 .start-stop:hover { background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0); text-shadow: 0 0 4px rgba(255, 255, 255, 0.6); } .stopwatch.theme-2 .reset { float: right } .stopwatch.theme-2 .start-stop { float: left } .stopwatch.theme-3 { border: 1px solid #aaa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100% #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background-image: linear-gradient(top, #eeeeee 0%, #cccccc 100%); height: auto; overflow: hidden; padding: 1em; position: relative; width: 140px; } .stopwatch.theme-3 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-3 .the-time { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 1px 1px 0 #ffffff; -moz-box-shadow: 1px 1px 0 #ffffff; box-shadow: 1px 1px 0 #ffffff; color: #fff; font-family: 'Dosis', sans-serif; font-size: 20px; margin-bottom: 10px; padding: 10px; background-color: #555555; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); background-image: linear-gradient(top, #222222 0%, #555555 100%); text-align: center; } .stopwatch.theme-3 .min:before { content: ':' } .stopwatch.theme-3 .min:after { content: ':' } .stopwatch.theme-3 .reset, .stopwatch.theme-3 .start-stop { background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0); border: 1px solid #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; color: #999; display: block; font-weight: bold; font-size: 13px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; } .stopwatch.theme-3 .reset:active, .stopwatch.theme-3 .start-stop:active { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .stopwatch.theme-3 .reset:hover, .stopwatch.theme-3 .start-stop:hover { background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #b7b7b7), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); background: -webkit-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); background: -o-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); background: -ms-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); background: linear-gradient(to bottom, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0); color: #777; } .stopwatch.theme-3 .start-stop { margin-bottom: 10px } .stopwatch.theme-4 { background: #606c88; background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606c88), color-stop(100%, #3f4c6b)); background: -webkit-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: -o-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: -ms-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: linear-gradient(to bottom, #606c88 0%, #3f4c6b 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#606c88', endColorstr='#3f4c6b', GradientType=0); border: 1px solid #aaa; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; height: auto; overflow: hidden; padding: 1em; position: relative; width: 200px; } .stopwatch.theme-4 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-4 .the-time { -webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); -moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); color: #ADBDD9; font-family: 'Electrolize', sans-serif; font-size: 20px; margin-bottom: 10px; padding: 10px; background-color: #555555; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); background-image: linear-gradient(top, #222222 0%, #555555 100%); text-align: center; text-shadow: 2px 2px 2px #000000; } .stopwatch.theme-4 .min:before { content: ':' } .stopwatch.theme-4 .min:after { content: ':' } .stopwatch.theme-4 .reset, .stopwatch.theme-4 .start-stop { background: #b8c6df; background: -moz-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8c6df), color-stop(100%, #6d88b7)); background: -webkit-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); background: -o-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); background: -ms-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); background: linear-gradient(to bottom, #b8c6df 0%, #6d88b7 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#b8c6df', endColorstr='#6d88b7', GradientType=0); color: #404D6C; display: inline-block; font-weight: bold; font-size: 11px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; width: 50%; } .stopwatch.theme-4 .reset:active, .stopwatch.theme-4 .start-stop:active { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .stopwatch.theme-4 .reset:hover, .stopwatch.theme-4 .start-stop:hover { background: #6d88b7; background: -moz-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6d88b7), color-stop(100%, #b8c6df)); background: -webkit-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); background: -o-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); background: -ms-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); background: linear-gradient(to bottom, #6d88b7 0%, #b8c6df 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#6d88b7', endColorstr='#b8c6df', GradientType=0); } .stopwatch.theme-4 .reset { border-left: 1px solid #5E6A86; float: right; } .stopwatch.theme-4 .start-stop { border-right: 1px solid #99bccd; float: left; } .stopwatch.theme-5 { background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0); border: 1px solid #aaa; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; height: auto; overflow: hidden; position: relative; width: 200px; } .stopwatch.theme-5 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-5 .the-time { border-bottom: 1px solid #aaa; color: #000; font-family: 'Spinnaker', sans-serif; font-size: 20px; height: 42px; line-height: 42px; margin-bottom: 10px; padding: 0 10px; text-align: center; } .stopwatch.theme-5 .min:before { content: ':' } .stopwatch.theme-5 .min:after { content: ':' } .stopwatch.theme-5 .reset, .stopwatch.theme-5 .start-stop { color: #fff; display: inline-block; font-weight: bold; font-size: 11px; height: 24px; line-height: 24px; margin-bottom: 10px; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #000000; text-transform: uppercase; width: 80px; } .stopwatch.theme-5 .reset:active { background: #c72200 } .stopwatch.theme-5 .start-stop:active { background: #72aa00 } .stopwatch.theme-5 .reset { background: #f3c5bd; background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3c5bd), color-stop(50%, #e86c57), color-stop(51%, #ea2803), color-stop(75%, #ff6600), color-stop(100%, #c72200)); background: -webkit-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); background: -o-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); background: -ms-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); background: linear-gradient(to bottom, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f3c5bd', endColorstr='#c72200', GradientType=0); float: right; margin-right: 10px; } .stopwatch.theme-5 .start-stop { background: #bfd255; background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfd255), color-stop(50%, #8eb92a), color-stop(51%, #72aa00), color-stop(100%, #9ecb2d)); background: -webkit-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); background: -o-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); background: -ms-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); background: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#bfd255', endColorstr='#9ecb2d', GradientType=0); float: left; margin-left: 10px; } .stopwatch.theme-6 { background: #ccc; border: 1px solid #aaa; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; height: auto; overflow: hidden; padding: 1em; position: relative; width: 200px; } .stopwatch.theme-6 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-6 .the-time { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 1px 1px 0 #ffffff; -moz-box-shadow: 1px 1px 0 #ffffff; box-shadow: 1px 1px 0 #ffffff; color: #ddd; font-family: 'Francois One', sans-serif; font-size: 20px; margin-bottom: 10px; padding: 10px; background-color: #555555; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); background-image: linear-gradient(top, #222222 0%, #555555 100%); text-align: center; } .stopwatch.theme-6 .min:before { content: ':' } .stopwatch.theme-6 .min:after { content: ':' } .stopwatch.theme-6 .reset, .stopwatch.theme-6 .start-stop { background: #cb60b3; background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3), color-stop(50%, #ad1283), color-stop(100%, #de47ac)); background: -webkit-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#cb60b3', endColorstr='#de47ac', GradientType=0); -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); color: #fff; display: inline-block; font-weight: bold; font-size: 11px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; width: 80px; } .stopwatch.theme-6 .reset:active, .stopwatch.theme-6 .start-stop:active { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .stopwatch.theme-6 .reset:hover, .stopwatch.theme-6 .start-stop:hover { text-shadow: 0 0 4px rgba(255, 255, 255, 0.6) } .stopwatch.theme-6 .reset { float: right } .stopwatch.theme-6 .start-stop { float: left } .stopwatch.theme-7 { background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0); border: 1px solid #aaa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; height: auto; overflow: hidden; padding: 10px; position: relative; width: 120px; } .stopwatch.theme-7 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-7 .the-time { background: #000; color: #0f0; font-family: 'Iceberg', cursive; font-size: 20px; margin-bottom: 10px; padding: 10px; text-align: center; } .stopwatch.theme-7 .min:before { content: ':' } .stopwatch.theme-7 .min:after { content: ':' } .stopwatch.theme-7 .reset, .stopwatch.theme-7 .start-stop { background: #606c88; background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606c88), color-stop(100%, #3f4c6b)); background: -webkit-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: -o-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: -ms-linear-gradient(top, #606c88 0%, #3f4c6b 100%); background: linear-gradient(to bottom, #606c88 0%, #3f4c6b 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#606c88', endColorstr='#3f4c6b', GradientType=0); color: #fff; display: block; font-weight: bold; font-size: 11px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; } .stopwatch.theme-7 .start-stop { margin-bottom: 10px } .stopwatch.theme-7 .reset:hover, .stopwatch.theme-7 .start-stop:hover { color: #d0dbf3 } .stopwatch.theme-7 .reset:active, .stopwatch.theme-7 .start-stop:active { background: #3f4c6b; background: -moz-linear-gradient(top, #3f4c6b 0%, #606c88 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3f4c6b), color-stop(100%, #606c88)); background: -webkit-linear-gradient(top, #3f4c6b 0%, #606c88 100%); background: -o-linear-gradient(top, #3f4c6b 0%, #606c88 100%); background: -ms-linear-gradient(top, #3f4c6b 0%, #606c88 100%); background: linear-gradient(to bottom, #3f4c6b 0%, #606c88 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3f4c6b', endColorstr='#606c88', GradientType=0); } .stopwatch.theme-8 { background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aebcbf), color-stop(50%, #6e7774), color-stop(51%, #0a0e0a), color-stop(100%, #0a0809)); background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -o-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -ms-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: linear-gradient(to bottom, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#aebcbf', endColorstr='#0a0809', GradientType=0); border: 1px solid #555; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; height: 40px; overflow: hidden; position: relative; width: 340px; } .stopwatch.theme-8 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-8 .the-time { color: #fff; display: inline-block; float: left; font-family: 'Share', cursive; font-size: 24px; height: 40px; line-height: 40px; text-align: center; width: 140px; } .stopwatch.theme-8 .min:before { content: ':' } .stopwatch.theme-8 .min:after { content: ':' } .stopwatch.theme-8 .reset, .stopwatch.theme-8 .start-stop { background: #eaeaea; background: -moz-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), color-stop(17%, #e0e0e0), color-stop(50%, #bfbfbf), color-stop(51%, #aaaaaa), color-stop(59%, #d6d6d6), color-stop(71%, #efefef), color-stop(84%, #c9c9c9), color-stop(100%, #878787)); background: -webkit-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); background: -o-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); background: -ms-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); background: linear-gradient(to bottom, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#eaeaea', endColorstr='#878787', GradientType=0); color: #444; display: inline-block; float: left; font-weight: bold; height: 40px; line-height: 40px; text-align: center; text-decoration: none; text-transform: uppercase; width: 99px; } .stopwatch.theme-8 .reset:hover, .stopwatch.theme-8 .start-stop:hover { background: #cedbe9; background: -moz-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b)); background: -webkit-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: -o-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: -ms-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: linear-gradient(to bottom, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#cedbe9', endColorstr='#26558b', GradientType=0); color: #fff; } .stopwatch.theme-9 { background: #cedbe9; background: -moz-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b)); background: -webkit-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: -o-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: -ms-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); background: linear-gradient(to bottom, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#cedbe9', endColorstr='#26558b', GradientType=0); border: 1px solid #aaa; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; height: 60px; overflow: hidden; padding: 10px; position: relative; width: 260px; } .stopwatch.theme-9 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-9 .the-time { background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c4c4c), color-stop(12%, #595959), color-stop(25%, #666666), color-stop(39%, #474747), color-stop(50%, #2c2c2c), color-stop(51%, #000000), color-stop(60%, #111111), color-stop(76%, #2b2b2b), color-stop(91%, #1c1c1c), color-stop(100%, #131313)); background: -webkit-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); background: -o-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); background: -ms-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); background: linear-gradient(to bottom, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0); -webkit-box-shadow: 1px 1px 0 #ffffff; -moz-box-shadow: 1px 1px 0 #ffffff; box-shadow: 1px 1px 0 #ffffff; color: #fff; font-family: 'Tulpen One', cursive; font-size: 24px; height: 40px; letter-spacing: 2px; line-height: 20px; margin-bottom: 10px; padding: 10px; position: absolute; top: 10px; left: 80px; text-align: center; width: 100px; } .stopwatch.theme-9 .min:before { content: ':' } .stopwatch.theme-9 .min:after { content: ':' } .stopwatch.theme-9 .reset, .stopwatch.theme-9 .start-stop { background: #fcfff4; background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfff4), color-stop(40%, #dfe5d7), color-stop(100%, #b3bead)); background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0); border: 1px solid #aaa; color: #222; display: block; height: 40px; line-height: 40px; position: absolute; text-align: center; text-decoration: none; text-transform: uppercase; top: 10px; width: 60px; } .stopwatch.theme-9 .reset:active, .stopwatch.theme-9 .start-stop:active { color: #f00 } .stopwatch.theme-9 .reset:hover, .stopwatch.theme-9 .start-stop:hover { color: #00a } .stopwatch.theme-9 .reset { left: 190px } .stopwatch.theme-9 .start-stop { left: 10px } .stopwatch.theme-10 { border: 3px solid #aaa; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: helvetica, arial, sans-serif; height: auto; overflow: hidden; position: relative; width: 260px; } .stopwatch.theme-10 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; } .stopwatch.theme-10 .the-time { background: #000; border-bottom: 1px solid #aaa; color: #dcecff; font-family: 'Wallpoet', cursive; font-size: 40px; padding: 10px; text-align: center; text-shadow: 0 0 3px #dcecff; } .stopwatch.theme-10 .min:before { content: ':' } .stopwatch.theme-10 .min:after { content: ':' } .stopwatch.theme-10 .reset, .stopwatch.theme-10 .start-stop { background: #499bea; background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #499bea), color-stop(100%, #207ce5)); background: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%); background: -o-linear-gradient(top, #499bea 0%, #207ce5 100%); background: -ms-linear-gradient(top, #499bea 0%, #207ce5 100%); background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#499bea', endColorstr='#207ce5', GradientType=0); display: block; width: 50%; float: left; color: #fff; font-weight: bold; font-size: 11px; text-align: center; padding: 5px 0 4px 0; text-decoration: none; text-shadow: 1px 1px 1px #000000; text-transform: uppercase; } .stopwatch.theme-10 .reset:active, .stopwatch.theme-10 .start-stop:active { text-shadow: none } .stopwatch.theme-10 .reset:hover, .stopwatch.theme-10 .start-stop:hover { background: #207ce5; background: -moz-linear-gradient(top, #207ce5 0%, #499bea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #207ce5), color-stop(100%, #499bea)); background: -webkit-linear-gradient(top, #207ce5 0%, #499bea 100%); background: -o-linear-gradient(top, #207ce5 0%, #499bea 100%); background: -ms-linear-gradient(top, #207ce5 0%, #499bea 100%); background: linear-gradient(to bottom, #207ce5 0%, #499bea 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#207ce5', endColorstr='#499bea', GradientType=0); } .stopwatch.theme-10 .reset { border-left: 1px solid #4f7199 } .stopwatch.theme-10 .start-stop { border-right: 1px solid #7da7d9 -------------------------------------------------------------------------------- /css/jq.stopwatch.css: -------------------------------------------------------------------------------- 1 | @import 'http://fonts.googleapis.com/css?family=Quantico|Cabin+Condensed|Dosis|Electrolize|Spinnaker|Francois+One|Iceberg|Share|Tulpen+One|Wallpoet'; 2 | 3 | .stopwatch.theme-1 { 4 | border: 1px solid #aaa; 5 | -webkit-border-radius: 6px; 6 | -moz-border-radius: 6px; 7 | border-radius: 6px; 8 | -webkit-background-clip: padding-box; 9 | -moz-background-clip: padding; 10 | background-clip: padding-box; 11 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 12 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 13 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 14 | box-sizing: border-box; 15 | -moz-box-sizing: border-box; 16 | -webkit-box-sizing: border-box; 17 | font-family: helvetica, arial, sans-serif; 18 | background-color: #eeeeee; 19 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100% #cccccc)); 20 | background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 21 | background-image: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 22 | background-image: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 23 | background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 24 | background-image: linear-gradient(top, #eeeeee 0%, #cccccc 100%); 25 | height: auto; 26 | overflow: hidden; 27 | padding: 1em; 28 | position: relative; 29 | width: 200px; 30 | } 31 | .stopwatch.theme-1 * { 32 | box-sizing: border-box; 33 | -moz-box-sizing: border-box; 34 | -webkit-box-sizing: border-box; 35 | position: relative; 36 | } 37 | .stopwatch.theme-1 .the-time { 38 | -webkit-border-radius: 4px; 39 | -moz-border-radius: 4px; 40 | border-radius: 4px; 41 | -webkit-background-clip: padding-box; 42 | -moz-background-clip: padding; 43 | background-clip: padding-box; 44 | -webkit-box-shadow: 1px 1px 0 #ffffff; 45 | -moz-box-shadow: 1px 1px 0 #ffffff; 46 | box-shadow: 1px 1px 0 #ffffff; 47 | color: #fff; 48 | font-family: 'Quantico', sans-serif; 49 | font-size: 20px; 50 | margin-bottom: 10px; 51 | padding: 10px; 52 | background-color: #555555; 53 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); 54 | background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); 55 | background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); 56 | background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); 57 | background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); 58 | background-image: linear-gradient(top, #222222 0%, #555555 100%); 59 | text-align: center; 60 | } 61 | .stopwatch.theme-1 .min:before { 62 | content: ':'; 63 | } 64 | .stopwatch.theme-1 .min:after { 65 | content: ':'; 66 | } 67 | .stopwatch.theme-1 .reset, 68 | .stopwatch.theme-1 .start-stop { 69 | -webkit-border-radius: 4px; 70 | -moz-border-radius: 4px; 71 | border-radius: 4px; 72 | -webkit-background-clip: padding-box; 73 | -moz-background-clip: padding; 74 | background-clip: padding-box; 75 | -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 76 | -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 77 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 78 | color: #fff; 79 | display: inline-block; 80 | font-weight: bold; 81 | font-size: 11px; 82 | height: 24px; 83 | line-height: 24px; 84 | text-align: center; 85 | text-decoration: none; 86 | text-transform: uppercase; 87 | width: 80px; 88 | } 89 | .stopwatch.theme-1 .reset:active, 90 | .stopwatch.theme-1 .start-stop:active { 91 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 92 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 93 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); 94 | } 95 | .stopwatch.theme-1 .reset:hover, 96 | .stopwatch.theme-1 .start-stop:hover { 97 | text-shadow: 0 0 4px rgba(255, 255, 255, 0.6); 98 | } 99 | .stopwatch.theme-1 .reset { 100 | background: #ff3019; 101 | background: -moz-linear-gradient(top, #ff3019 1%, #aa0306 100%); 102 | background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ff3019), color-stop(100%, #aa0306)); 103 | background: -webkit-linear-gradient(top, #ff3019 1%, #aa0306 100%); 104 | background: -o-linear-gradient(top, #ff3019 1%, #aa0306 100%); 105 | background: -ms-linear-gradient(top, #ff3019 1%, #aa0306 100%); 106 | background: linear-gradient(to bottom, #ff3019 1%, #aa0306 100%); 107 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff3019', endColorstr='#aa0306', GradientType=0); 108 | float: right; 109 | } 110 | .stopwatch.theme-1 .start-stop { 111 | background: #61cd30; 112 | background: -moz-linear-gradient(top, #88cd02 0%, #7bba00 100%); 113 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #88cd02), color-stop(100%, #7bba00)); 114 | background: -webkit-linear-gradient(top, #88cd02 0%, #7bba00 100%); 115 | background: -o-linear-gradient(top, #88cd02 0%, #7bba00 100%); 116 | background: -ms-linear-gradient(top, #88cd02 0%, #7bba00 100%); 117 | background: linear-gradient(to bottom, #88cd02 0%, #7bba00 100%); 118 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#88cd02', endColorstr='#7bba00', GradientType=0); 119 | float: left; 120 | } 121 | .stopwatch.theme-2 { 122 | border: 1px solid #aaa; 123 | -webkit-border-radius: 6px; 124 | -moz-border-radius: 6px; 125 | border-radius: 6px; 126 | -webkit-background-clip: padding-box; 127 | -moz-background-clip: padding; 128 | background-clip: padding-box; 129 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 130 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 131 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 132 | box-sizing: border-box; 133 | -moz-box-sizing: border-box; 134 | -webkit-box-sizing: border-box; 135 | font-family: helvetica, arial, sans-serif; 136 | background-color: #222222; 137 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100% #222222)); 138 | background-image: -webkit-linear-gradient(top, #555555 0%, #222222 100%); 139 | background-image: -moz-linear-gradient(top, #555555 0%, #222222 100%); 140 | background-image: -ms-linear-gradient(top, #555555 0%, #222222 100%); 141 | background-image: -o-linear-gradient(top, #555555 0%, #222222 100%); 142 | background-image: linear-gradient(top, #555555 0%, #222222 100%); 143 | height: auto; 144 | overflow: hidden; 145 | padding: 1em; 146 | position: relative; 147 | width: 200px; 148 | } 149 | .stopwatch.theme-2 * { 150 | box-sizing: border-box; 151 | -moz-box-sizing: border-box; 152 | -webkit-box-sizing: border-box; 153 | position: relative; 154 | } 155 | .stopwatch.theme-2 .the-time { 156 | border: 1px solid #777; 157 | -webkit-border-radius: 4px; 158 | -moz-border-radius: 4px; 159 | border-radius: 4px; 160 | -webkit-background-clip: padding-box; 161 | -moz-background-clip: padding; 162 | background-clip: padding-box; 163 | -webkit-box-shadow: 2px 2px 2px #000000; 164 | -moz-box-shadow: 2px 2px 2px #000000; 165 | box-shadow: 2px 2px 2px #000000; 166 | color: #71b8ee; 167 | font-family: 'Cabin Condensed', sans-serif; 168 | font-size: 20px; 169 | margin-bottom: 10px; 170 | padding: 10px; 171 | background-color: #555555; 172 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); 173 | background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); 174 | background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); 175 | background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); 176 | background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); 177 | background-image: linear-gradient(top, #222222 0%, #555555 100%); 178 | text-align: center; 179 | } 180 | .stopwatch.theme-2 .min:before { 181 | content: ':'; 182 | } 183 | .stopwatch.theme-2 .min:after { 184 | content: ':'; 185 | } 186 | .stopwatch.theme-2 .reset, 187 | .stopwatch.theme-2 .start-stop { 188 | background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); 189 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #959595), color-stop(46%, #0d0d0d), color-stop(50%, #010101), color-stop(53%, #0a0a0a), color-stop(76%, #4e4e4e), color-stop(87%, #383838), color-stop(100%, #1b1b1b)); 190 | background: -webkit-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); 191 | background: -o-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); 192 | background: -ms-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); 193 | background: linear-gradient(to bottom, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); 194 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#959595', endColorstr='#1b1b1b', GradientType=0); 195 | border-top: 1px solid #4f4f4f; 196 | -webkit-border-radius: 24px; 197 | -moz-border-radius: 24px; 198 | border-radius: 24px; 199 | -webkit-background-clip: padding-box; 200 | -moz-background-clip: padding; 201 | background-clip: padding-box; 202 | -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 203 | -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 204 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 205 | color: #ddd; 206 | display: inline-block; 207 | font-weight: bold; 208 | font-size: 11px; 209 | height: 24px; 210 | line-height: 24px; 211 | text-align: center; 212 | text-decoration: none; 213 | text-transform: uppercase; 214 | width: 80px; 215 | } 216 | .stopwatch.theme-2 .reset:active, 217 | .stopwatch.theme-2 .start-stop:active { 218 | background: #45484d; 219 | background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); 220 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000000)); 221 | background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%); 222 | background: -o-linear-gradient(top, #45484d 0%, #000000 100%); 223 | background: -ms-linear-gradient(top, #45484d 0%, #000000 100%); 224 | background: linear-gradient(to bottom, #45484d 0%, #000000 100%); 225 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=0); 226 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 227 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 228 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); 229 | } 230 | .stopwatch.theme-2 .reset:hover, 231 | .stopwatch.theme-2 .start-stop:hover { 232 | background: #7d7e7d; 233 | background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 234 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e)); 235 | background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 236 | background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 237 | background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 238 | background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%); 239 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0); 240 | text-shadow: 0 0 4px rgba(255, 255, 255, 0.6); 241 | } 242 | .stopwatch.theme-2 .reset { 243 | float: right; 244 | } 245 | .stopwatch.theme-2 .start-stop { 246 | float: left; 247 | } 248 | .stopwatch.theme-3 { 249 | border: 1px solid #aaa; 250 | -webkit-border-radius: 6px; 251 | -moz-border-radius: 6px; 252 | border-radius: 6px; 253 | -webkit-background-clip: padding-box; 254 | -moz-background-clip: padding; 255 | background-clip: padding-box; 256 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 257 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 258 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 259 | box-sizing: border-box; 260 | -moz-box-sizing: border-box; 261 | -webkit-box-sizing: border-box; 262 | font-family: helvetica, arial, sans-serif; 263 | background-color: #eeeeee; 264 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100% #cccccc)); 265 | background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 266 | background-image: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 267 | background-image: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 268 | background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 269 | background-image: linear-gradient(top, #eeeeee 0%, #cccccc 100%); 270 | height: auto; 271 | overflow: hidden; 272 | padding: 1em; 273 | position: relative; 274 | width: 140px; 275 | } 276 | .stopwatch.theme-3 * { 277 | box-sizing: border-box; 278 | -moz-box-sizing: border-box; 279 | -webkit-box-sizing: border-box; 280 | position: relative; 281 | } 282 | .stopwatch.theme-3 .the-time { 283 | -webkit-border-radius: 4px; 284 | -moz-border-radius: 4px; 285 | border-radius: 4px; 286 | -webkit-background-clip: padding-box; 287 | -moz-background-clip: padding; 288 | background-clip: padding-box; 289 | -webkit-box-shadow: 1px 1px 0 #ffffff; 290 | -moz-box-shadow: 1px 1px 0 #ffffff; 291 | box-shadow: 1px 1px 0 #ffffff; 292 | color: #fff; 293 | font-family: 'Dosis', sans-serif; 294 | font-size: 20px; 295 | margin-bottom: 10px; 296 | padding: 10px; 297 | background-color: #555555; 298 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); 299 | background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); 300 | background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); 301 | background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); 302 | background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); 303 | background-image: linear-gradient(top, #222222 0%, #555555 100%); 304 | text-align: center; 305 | } 306 | .stopwatch.theme-3 .min:before { 307 | content: ':'; 308 | } 309 | .stopwatch.theme-3 .min:after { 310 | content: ':'; 311 | } 312 | .stopwatch.theme-3 .reset, 313 | .stopwatch.theme-3 .start-stop { 314 | background: #e2e2e2; 315 | background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 316 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); 317 | background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 318 | background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 319 | background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 320 | background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 321 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0); 322 | border: 1px solid #aaa; 323 | -webkit-border-radius: 4px; 324 | -moz-border-radius: 4px; 325 | border-radius: 4px; 326 | -webkit-background-clip: padding-box; 327 | -moz-background-clip: padding; 328 | background-clip: padding-box; 329 | color: #999; 330 | display: block; 331 | font-weight: bold; 332 | font-size: 13px; 333 | height: 24px; 334 | line-height: 24px; 335 | text-align: center; 336 | text-decoration: none; 337 | text-transform: uppercase; 338 | } 339 | .stopwatch.theme-3 .reset:active, 340 | .stopwatch.theme-3 .start-stop:active { 341 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 342 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 343 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); 344 | } 345 | .stopwatch.theme-3 .reset:hover, 346 | .stopwatch.theme-3 .start-stop:hover { 347 | background: #e2e2e2; 348 | background: -moz-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); 349 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #b7b7b7), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); 350 | background: -webkit-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); 351 | background: -o-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); 352 | background: -ms-linear-gradient(top, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); 353 | background: linear-gradient(to bottom, #e2e2e2 0%, #b7b7b7 50%, #d1d1d1 51%, #fefefe 100%); 354 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0); 355 | color: #777; 356 | } 357 | .stopwatch.theme-3 .start-stop { 358 | margin-bottom: 10px; 359 | } 360 | .stopwatch.theme-4 { 361 | background: #606c88; 362 | background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 363 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606c88), color-stop(100%, #3f4c6b)); 364 | background: -webkit-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 365 | background: -o-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 366 | background: -ms-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 367 | background: linear-gradient(to bottom, #606c88 0%, #3f4c6b 100%); 368 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#606c88', endColorstr='#3f4c6b', GradientType=0); 369 | border: 1px solid #aaa; 370 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 371 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 372 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 373 | box-sizing: border-box; 374 | -moz-box-sizing: border-box; 375 | -webkit-box-sizing: border-box; 376 | font-family: helvetica, arial, sans-serif; 377 | height: auto; 378 | overflow: hidden; 379 | padding: 1em; 380 | position: relative; 381 | width: 200px; 382 | } 383 | .stopwatch.theme-4 * { 384 | box-sizing: border-box; 385 | -moz-box-sizing: border-box; 386 | -webkit-box-sizing: border-box; 387 | position: relative; 388 | } 389 | .stopwatch.theme-4 .the-time { 390 | -webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); 391 | -moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); 392 | box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); 393 | color: #ADBDD9; 394 | font-family: 'Electrolize', sans-serif; 395 | font-size: 20px; 396 | margin-bottom: 10px; 397 | padding: 10px; 398 | background-color: #555555; 399 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); 400 | background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); 401 | background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); 402 | background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); 403 | background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); 404 | background-image: linear-gradient(top, #222222 0%, #555555 100%); 405 | text-align: center; 406 | text-shadow: 2px 2px 2px #000000; 407 | } 408 | .stopwatch.theme-4 .min:before { 409 | content: ':'; 410 | } 411 | .stopwatch.theme-4 .min:after { 412 | content: ':'; 413 | } 414 | .stopwatch.theme-4 .reset, 415 | .stopwatch.theme-4 .start-stop { 416 | background: #b8c6df; 417 | background: -moz-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); 418 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8c6df), color-stop(100%, #6d88b7)); 419 | background: -webkit-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); 420 | background: -o-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); 421 | background: -ms-linear-gradient(top, #b8c6df 0%, #6d88b7 100%); 422 | background: linear-gradient(to bottom, #b8c6df 0%, #6d88b7 100%); 423 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#b8c6df', endColorstr='#6d88b7', GradientType=0); 424 | color: #404D6C; 425 | display: inline-block; 426 | font-weight: bold; 427 | font-size: 11px; 428 | height: 24px; 429 | line-height: 24px; 430 | text-align: center; 431 | text-decoration: none; 432 | text-transform: uppercase; 433 | width: 50%; 434 | } 435 | .stopwatch.theme-4 .reset:active, 436 | .stopwatch.theme-4 .start-stop:active { 437 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 438 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 439 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); 440 | } 441 | .stopwatch.theme-4 .reset:hover, 442 | .stopwatch.theme-4 .start-stop:hover { 443 | background: #6d88b7; 444 | background: -moz-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); 445 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6d88b7), color-stop(100%, #b8c6df)); 446 | background: -webkit-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); 447 | background: -o-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); 448 | background: -ms-linear-gradient(top, #6d88b7 0%, #b8c6df 100%); 449 | background: linear-gradient(to bottom, #6d88b7 0%, #b8c6df 100%); 450 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#6d88b7', endColorstr='#b8c6df', GradientType=0); 451 | } 452 | .stopwatch.theme-4 .reset { 453 | border-left: 1px solid #5E6A86; 454 | float: right; 455 | } 456 | .stopwatch.theme-4 .start-stop { 457 | border-right: 1px solid #99bccd; 458 | float: left; 459 | } 460 | .stopwatch.theme-5 { 461 | background: #e2e2e2; 462 | background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 463 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); 464 | background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 465 | background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 466 | background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 467 | background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 468 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0); 469 | border: 1px solid #aaa; 470 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 471 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 472 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 473 | box-sizing: border-box; 474 | -moz-box-sizing: border-box; 475 | -webkit-box-sizing: border-box; 476 | font-family: helvetica, arial, sans-serif; 477 | height: auto; 478 | overflow: hidden; 479 | position: relative; 480 | width: 200px; 481 | } 482 | .stopwatch.theme-5 * { 483 | box-sizing: border-box; 484 | -moz-box-sizing: border-box; 485 | -webkit-box-sizing: border-box; 486 | position: relative; 487 | } 488 | .stopwatch.theme-5 .the-time { 489 | border-bottom: 1px solid #aaa; 490 | color: #000; 491 | font-family: 'Spinnaker', sans-serif; 492 | font-size: 20px; 493 | height: 42px; 494 | line-height: 42px; 495 | margin-bottom: 10px; 496 | padding: 0 10px; 497 | text-align: center; 498 | } 499 | .stopwatch.theme-5 .min:before { 500 | content: ':'; 501 | } 502 | .stopwatch.theme-5 .min:after { 503 | content: ':'; 504 | } 505 | .stopwatch.theme-5 .reset, 506 | .stopwatch.theme-5 .start-stop { 507 | color: #fff; 508 | display: inline-block; 509 | font-weight: bold; 510 | font-size: 11px; 511 | height: 24px; 512 | line-height: 24px; 513 | margin-bottom: 10px; 514 | text-align: center; 515 | text-decoration: none; 516 | text-shadow: 1px 1px 1px #000000; 517 | text-transform: uppercase; 518 | width: 80px; 519 | } 520 | .stopwatch.theme-5 .reset:active { 521 | background: #c72200; 522 | } 523 | .stopwatch.theme-5 .start-stop:active { 524 | background: #72aa00; 525 | } 526 | .stopwatch.theme-5 .reset { 527 | background: #f3c5bd; 528 | background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); 529 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3c5bd), color-stop(50%, #e86c57), color-stop(51%, #ea2803), color-stop(75%, #ff6600), color-stop(100%, #c72200)); 530 | background: -webkit-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); 531 | background: -o-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); 532 | background: -ms-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); 533 | background: linear-gradient(to bottom, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); 534 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f3c5bd', endColorstr='#c72200', GradientType=0); 535 | float: right; 536 | margin-right: 10px; 537 | } 538 | .stopwatch.theme-5 .start-stop { 539 | background: #bfd255; 540 | background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); 541 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfd255), color-stop(50%, #8eb92a), color-stop(51%, #72aa00), color-stop(100%, #9ecb2d)); 542 | background: -webkit-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); 543 | background: -o-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); 544 | background: -ms-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); 545 | background: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); 546 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#bfd255', endColorstr='#9ecb2d', GradientType=0); 547 | float: left; 548 | margin-left: 10px; 549 | } 550 | .stopwatch.theme-6 { 551 | background: #ccc; 552 | border: 1px solid #aaa; 553 | -webkit-border-radius: 15px; 554 | -moz-border-radius: 15px; 555 | border-radius: 15px; 556 | -webkit-background-clip: padding-box; 557 | -moz-background-clip: padding; 558 | background-clip: padding-box; 559 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 560 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 561 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 562 | box-sizing: border-box; 563 | -moz-box-sizing: border-box; 564 | -webkit-box-sizing: border-box; 565 | font-family: helvetica, arial, sans-serif; 566 | height: auto; 567 | overflow: hidden; 568 | padding: 1em; 569 | position: relative; 570 | width: 200px; 571 | } 572 | .stopwatch.theme-6 * { 573 | box-sizing: border-box; 574 | -moz-box-sizing: border-box; 575 | -webkit-box-sizing: border-box; 576 | position: relative; 577 | } 578 | .stopwatch.theme-6 .the-time { 579 | -webkit-border-radius: 100%; 580 | -moz-border-radius: 100%; 581 | border-radius: 100%; 582 | -webkit-background-clip: padding-box; 583 | -moz-background-clip: padding; 584 | background-clip: padding-box; 585 | -webkit-box-shadow: 1px 1px 0 #ffffff; 586 | -moz-box-shadow: 1px 1px 0 #ffffff; 587 | box-shadow: 1px 1px 0 #ffffff; 588 | color: #ddd; 589 | font-family: 'Francois One', sans-serif; 590 | font-size: 20px; 591 | margin-bottom: 10px; 592 | padding: 10px; 593 | background-color: #555555; 594 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222222), color-stop(100% #555555)); 595 | background-image: -webkit-linear-gradient(top, #222222 0%, #555555 100%); 596 | background-image: -moz-linear-gradient(top, #222222 0%, #555555 100%); 597 | background-image: -ms-linear-gradient(top, #222222 0%, #555555 100%); 598 | background-image: -o-linear-gradient(top, #222222 0%, #555555 100%); 599 | background-image: linear-gradient(top, #222222 0%, #555555 100%); 600 | text-align: center; 601 | } 602 | .stopwatch.theme-6 .min:before { 603 | content: ':'; 604 | } 605 | .stopwatch.theme-6 .min:after { 606 | content: ':'; 607 | } 608 | .stopwatch.theme-6 .reset, 609 | .stopwatch.theme-6 .start-stop { 610 | background: #cb60b3; 611 | background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); 612 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3), color-stop(50%, #ad1283), color-stop(100%, #de47ac)); 613 | background: -webkit-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); 614 | background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); 615 | background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); 616 | background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%); 617 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#cb60b3', endColorstr='#de47ac', GradientType=0); 618 | -webkit-border-radius: 24px; 619 | -moz-border-radius: 24px; 620 | border-radius: 24px; 621 | -webkit-background-clip: padding-box; 622 | -moz-background-clip: padding; 623 | background-clip: padding-box; 624 | -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 625 | -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 626 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 627 | color: #fff; 628 | display: inline-block; 629 | font-weight: bold; 630 | font-size: 11px; 631 | height: 24px; 632 | line-height: 24px; 633 | text-align: center; 634 | text-decoration: none; 635 | text-transform: uppercase; 636 | width: 80px; 637 | } 638 | .stopwatch.theme-6 .reset:active, 639 | .stopwatch.theme-6 .start-stop:active { 640 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 641 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 642 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); 643 | } 644 | .stopwatch.theme-6 .reset:hover, 645 | .stopwatch.theme-6 .start-stop:hover { 646 | text-shadow: 0 0 4px rgba(255, 255, 255, 0.6); 647 | } 648 | .stopwatch.theme-6 .reset { 649 | float: right; 650 | } 651 | .stopwatch.theme-6 .start-stop { 652 | float: left; 653 | } 654 | .stopwatch.theme-7 { 655 | background: #7d7e7d; 656 | background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 657 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e)); 658 | background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 659 | background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 660 | background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 661 | background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%); 662 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0); 663 | border: 1px solid #aaa; 664 | -webkit-border-radius: 6px; 665 | -moz-border-radius: 6px; 666 | border-radius: 6px; 667 | -webkit-background-clip: padding-box; 668 | -moz-background-clip: padding; 669 | background-clip: padding-box; 670 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 671 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 672 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 673 | box-sizing: border-box; 674 | -moz-box-sizing: border-box; 675 | -webkit-box-sizing: border-box; 676 | font-family: helvetica, arial, sans-serif; 677 | height: auto; 678 | overflow: hidden; 679 | padding: 10px; 680 | position: relative; 681 | width: 120px; 682 | } 683 | .stopwatch.theme-7 * { 684 | box-sizing: border-box; 685 | -moz-box-sizing: border-box; 686 | -webkit-box-sizing: border-box; 687 | position: relative; 688 | } 689 | .stopwatch.theme-7 .the-time { 690 | background: #000; 691 | color: #0f0; 692 | font-family: 'Iceberg', cursive; 693 | font-size: 20px; 694 | margin-bottom: 10px; 695 | padding: 10px; 696 | text-align: center; 697 | } 698 | .stopwatch.theme-7 .min:before { 699 | content: ':'; 700 | } 701 | .stopwatch.theme-7 .min:after { 702 | content: ':'; 703 | } 704 | .stopwatch.theme-7 .reset, 705 | .stopwatch.theme-7 .start-stop { 706 | background: #606c88; 707 | background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 708 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606c88), color-stop(100%, #3f4c6b)); 709 | background: -webkit-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 710 | background: -o-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 711 | background: -ms-linear-gradient(top, #606c88 0%, #3f4c6b 100%); 712 | background: linear-gradient(to bottom, #606c88 0%, #3f4c6b 100%); 713 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#606c88', endColorstr='#3f4c6b', GradientType=0); 714 | color: #fff; 715 | display: block; 716 | font-weight: bold; 717 | font-size: 11px; 718 | height: 24px; 719 | line-height: 24px; 720 | text-align: center; 721 | text-decoration: none; 722 | text-transform: uppercase; 723 | } 724 | .stopwatch.theme-7 .start-stop { 725 | margin-bottom: 10px; 726 | } 727 | .stopwatch.theme-7 .reset:hover, 728 | .stopwatch.theme-7 .start-stop:hover { 729 | color: #d0dbf3; 730 | } 731 | .stopwatch.theme-7 .reset:active, 732 | .stopwatch.theme-7 .start-stop:active { 733 | background: #3f4c6b; 734 | background: -moz-linear-gradient(top, #3f4c6b 0%, #606c88 100%); 735 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3f4c6b), color-stop(100%, #606c88)); 736 | background: -webkit-linear-gradient(top, #3f4c6b 0%, #606c88 100%); 737 | background: -o-linear-gradient(top, #3f4c6b 0%, #606c88 100%); 738 | background: -ms-linear-gradient(top, #3f4c6b 0%, #606c88 100%); 739 | background: linear-gradient(to bottom, #3f4c6b 0%, #606c88 100%); 740 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3f4c6b', endColorstr='#606c88', GradientType=0); 741 | } 742 | .stopwatch.theme-8 { 743 | background: #aebcbf; 744 | background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); 745 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aebcbf), color-stop(50%, #6e7774), color-stop(51%, #0a0e0a), color-stop(100%, #0a0809)); 746 | background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); 747 | background: -o-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); 748 | background: -ms-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); 749 | background: linear-gradient(to bottom, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); 750 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#aebcbf', endColorstr='#0a0809', GradientType=0); 751 | border: 1px solid #555; 752 | box-sizing: border-box; 753 | -moz-box-sizing: border-box; 754 | -webkit-box-sizing: border-box; 755 | font-family: helvetica, arial, sans-serif; 756 | height: 40px; 757 | overflow: hidden; 758 | position: relative; 759 | width: 340px; 760 | } 761 | .stopwatch.theme-8 * { 762 | box-sizing: border-box; 763 | -moz-box-sizing: border-box; 764 | -webkit-box-sizing: border-box; 765 | position: relative; 766 | } 767 | .stopwatch.theme-8 .the-time { 768 | color: #fff; 769 | display: inline-block; 770 | float: left; 771 | font-family: 'Share', cursive; 772 | font-size: 24px; 773 | height: 40px; 774 | line-height: 40px; 775 | text-align: center; 776 | width: 140px; 777 | } 778 | .stopwatch.theme-8 .min:before { 779 | content: ':'; 780 | } 781 | .stopwatch.theme-8 .min:after { 782 | content: ':'; 783 | } 784 | .stopwatch.theme-8 .reset, 785 | .stopwatch.theme-8 .start-stop { 786 | background: #eaeaea; 787 | background: -moz-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); 788 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), color-stop(17%, #e0e0e0), color-stop(50%, #bfbfbf), color-stop(51%, #aaaaaa), color-stop(59%, #d6d6d6), color-stop(71%, #efefef), color-stop(84%, #c9c9c9), color-stop(100%, #878787)); 789 | background: -webkit-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); 790 | background: -o-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); 791 | background: -ms-linear-gradient(top, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); 792 | background: linear-gradient(to bottom, #eaeaea 0%, #e0e0e0 17%, #bfbfbf 50%, #aaaaaa 51%, #d6d6d6 59%, #efefef 71%, #c9c9c9 84%, #878787 100%); 793 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#eaeaea', endColorstr='#878787', GradientType=0); 794 | color: #444; 795 | display: inline-block; 796 | float: left; 797 | font-weight: bold; 798 | height: 40px; 799 | line-height: 40px; 800 | text-align: center; 801 | text-decoration: none; 802 | text-transform: uppercase; 803 | width: 99px; 804 | } 805 | .stopwatch.theme-8 .reset:hover, 806 | .stopwatch.theme-8 .start-stop:hover { 807 | background: #cedbe9; 808 | background: -moz-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 809 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b)); 810 | background: -webkit-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 811 | background: -o-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 812 | background: -ms-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 813 | background: linear-gradient(to bottom, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 814 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#cedbe9', endColorstr='#26558b', GradientType=0); 815 | color: #fff; 816 | } 817 | .stopwatch.theme-9 { 818 | background: #cedbe9; 819 | background: -moz-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 820 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b)); 821 | background: -webkit-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 822 | background: -o-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 823 | background: -ms-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 824 | background: linear-gradient(to bottom, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); 825 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#cedbe9', endColorstr='#26558b', GradientType=0); 826 | border: 1px solid #aaa; 827 | box-sizing: border-box; 828 | -moz-box-sizing: border-box; 829 | -webkit-box-sizing: border-box; 830 | font-family: helvetica, arial, sans-serif; 831 | height: 60px; 832 | overflow: hidden; 833 | padding: 10px; 834 | position: relative; 835 | width: 260px; 836 | } 837 | .stopwatch.theme-9 * { 838 | box-sizing: border-box; 839 | -moz-box-sizing: border-box; 840 | -webkit-box-sizing: border-box; 841 | position: relative; 842 | } 843 | .stopwatch.theme-9 .the-time { 844 | background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); 845 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c4c4c), color-stop(12%, #595959), color-stop(25%, #666666), color-stop(39%, #474747), color-stop(50%, #2c2c2c), color-stop(51%, #000000), color-stop(60%, #111111), color-stop(76%, #2b2b2b), color-stop(91%, #1c1c1c), color-stop(100%, #131313)); 846 | background: -webkit-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); 847 | background: -o-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); 848 | background: -ms-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); 849 | background: linear-gradient(to bottom, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); 850 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0); 851 | -webkit-box-shadow: 1px 1px 0 #ffffff; 852 | -moz-box-shadow: 1px 1px 0 #ffffff; 853 | box-shadow: 1px 1px 0 #ffffff; 854 | color: #fff; 855 | font-family: 'Tulpen One', cursive; 856 | font-size: 24px; 857 | height: 40px; 858 | letter-spacing: 2px; 859 | line-height: 20px; 860 | margin-bottom: 10px; 861 | padding: 10px; 862 | position: absolute; 863 | top: 10px; 864 | left: 80px; 865 | text-align: center; 866 | width: 100px; 867 | } 868 | .stopwatch.theme-9 .min:before { 869 | content: ':'; 870 | } 871 | .stopwatch.theme-9 .min:after { 872 | content: ':'; 873 | } 874 | .stopwatch.theme-9 .reset, 875 | .stopwatch.theme-9 .start-stop { 876 | background: #fcfff4; 877 | background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 878 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfff4), color-stop(40%, #dfe5d7), color-stop(100%, #b3bead)); 879 | background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 880 | background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 881 | background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 882 | background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 883 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0); 884 | border: 1px solid #aaa; 885 | color: #222; 886 | display: block; 887 | height: 40px; 888 | line-height: 40px; 889 | position: absolute; 890 | text-align: center; 891 | text-decoration: none; 892 | text-transform: uppercase; 893 | top: 10px; 894 | width: 60px; 895 | } 896 | .stopwatch.theme-9 .reset:active, 897 | .stopwatch.theme-9 .start-stop:active { 898 | color: #f00; 899 | } 900 | .stopwatch.theme-9 .reset:hover, 901 | .stopwatch.theme-9 .start-stop:hover { 902 | color: #00a; 903 | } 904 | .stopwatch.theme-9 .reset { 905 | left: 190px; 906 | } 907 | .stopwatch.theme-9 .start-stop { 908 | left: 10px; 909 | } 910 | .stopwatch.theme-10 { 911 | border: 3px solid #aaa; 912 | -webkit-border-top-left-radius: 5px; 913 | -webkit-border-top-right-radius: 5px; 914 | -moz-border-radius-topleft: 5px; 915 | -moz-border-radius-topright: 5px; 916 | border-top-left-radius: 5px; 917 | border-top-right-radius: 5px; 918 | box-sizing: border-box; 919 | -moz-box-sizing: border-box; 920 | -webkit-box-sizing: border-box; 921 | font-family: helvetica, arial, sans-serif; 922 | height: auto; 923 | overflow: hidden; 924 | position: relative; 925 | width: 260px; 926 | } 927 | .stopwatch.theme-10 * { 928 | box-sizing: border-box; 929 | -moz-box-sizing: border-box; 930 | -webkit-box-sizing: border-box; 931 | position: relative; 932 | } 933 | .stopwatch.theme-10 .the-time { 934 | background: #000; 935 | border-bottom: 1px solid #aaa; 936 | color: #dcecff; 937 | font-family: 'Wallpoet', cursive; 938 | font-size: 40px; 939 | padding: 10px; 940 | text-align: center; 941 | text-shadow: 0 0 3px #dcecff; 942 | } 943 | .stopwatch.theme-10 .min:before { 944 | content: ':'; 945 | } 946 | .stopwatch.theme-10 .min:after { 947 | content: ':'; 948 | } 949 | .stopwatch.theme-10 .reset, 950 | .stopwatch.theme-10 .start-stop { 951 | background: #499bea; 952 | background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); 953 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #499bea), color-stop(100%, #207ce5)); 954 | background: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%); 955 | background: -o-linear-gradient(top, #499bea 0%, #207ce5 100%); 956 | background: -ms-linear-gradient(top, #499bea 0%, #207ce5 100%); 957 | background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%); 958 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#499bea', endColorstr='#207ce5', GradientType=0); 959 | display: block; 960 | width: 50%; 961 | float: left; 962 | color: #fff; 963 | font-weight: bold; 964 | font-size: 11px; 965 | text-align: center; 966 | padding: 5px 0 4px 0; 967 | text-decoration: none; 968 | text-shadow: 1px 1px 1px #000000; 969 | text-transform: uppercase; 970 | } 971 | .stopwatch.theme-10 .reset:active, 972 | .stopwatch.theme-10 .start-stop:active { 973 | text-shadow: none; 974 | } 975 | .stopwatch.theme-10 .reset:hover, 976 | .stopwatch.theme-10 .start-stop:hover { 977 | background: #207ce5; 978 | background: -moz-linear-gradient(top, #207ce5 0%, #499bea 100%); 979 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #207ce5), color-stop(100%, #499bea)); 980 | background: -webkit-linear-gradient(top, #207ce5 0%, #499bea 100%); 981 | background: -o-linear-gradient(top, #207ce5 0%, #499bea 100%); 982 | background: -ms-linear-gradient(top, #207ce5 0%, #499bea 100%); 983 | background: linear-gradient(to bottom, #207ce5 0%, #499bea 100%); 984 | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#207ce5', endColorstr='#499bea', GradientType=0); 985 | } 986 | .stopwatch.theme-10 .reset { 987 | border-left: 1px solid #4f7199; 988 | } 989 | .stopwatch.theme-10 .start-stop { 990 | border-right: 1px solid #7da7d9; 991 | } 992 | --------------------------------------------------------------------------------