diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a905856 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +.meteor/local diff --git a/.meteor/.gitignore b/.meteor/.gitignore new file mode 100644 index 0000000..4083037 --- /dev/null +++ b/.meteor/.gitignore @@ -0,0 +1 @@ +local diff --git a/.meteor/packages b/.meteor/packages new file mode 100644 index 0000000..0a73f74 --- /dev/null +++ b/.meteor/packages @@ -0,0 +1,9 @@ +# Meteor packages used by this project, one per line. +# +# 'meteor add' and 'meteor remove' will edit this file for you, +# but you can also edit it by hand. + +autopublish +jquery +coffeescript +less diff --git a/README.md b/README.md index 085643e..552d1f3 100644 --- a/README.md +++ b/README.md @@ -1,33 +1 @@ -# Meteor Leaderboard example with CoffeeScript, Less and Bootstrap - -A port of the [Meteor](http://meteor.com/) framework's [Leaderboard example](http://meteor.com/examples/leaderboard) rewritten using [CoffeeScript](http://coffeescript.org/), [Less](http://lesscss.org/) and Twitter [Bootstrap](http://twitter.github.com/bootstrap/). - -This port has been enhanced with Bootstrap styling, a drop-down menu and tooltips. You can also add and delete players, reset the data and sort players by name and score. The changes to the original example reflect these enhancements. I've made use of the jQuery `$.extend()` API to soak up repetitive template property assignments. - -Here's a [screenshot](https://github.com/srackham/leaderboard-coffeescript/blob/master/screenshot.png). - -The only tricky bit was setting the tooltip popup events (with Bootstrap's jQuery `tooltip()` plugin method) after template (re)rendering. This is done with the `Template.player.enable_tooltips` method which is invoked each time the 'player' template is rendered. Execution is deferred until the template has been rendered using the `Meteor.defer` method (see [this stackoverflow discussion](http://stackoverflow.com/questions/10109788/callback-after-the-dom-was-updated-in-meteor-js)). - -**NOTE**: When an element with a tooltip is clicked tooltip popups are deleted, this prevents zombie tooltips from occuring when the corresponding DOM elements are deleted or moved. - -## Installation -To install create a meteor project and clone this repo into it (you have to move the `.meteor` directory out temporarily else git refuses to clone). You also need to install the Meteor jquery package and compile the CoffeeScript and Less files (in my development environment I have configuired Vim to auto-compile CoffeeScript and Less files): - - meteor create leaderboard-coffeescript - rm leaderboard-coffeescript/* - mv leaderboard-coffeescript/.meteor/ /tmp - git clone git@github.com:srackham/leaderboard-coffeescript.git - mv /tmp/.meteor/ leaderboard-coffeescript/ - cd leaderboard-coffeescript/ - meteor add jquery - coffee -c leaderboard.coffee - lessc client/leaderboard.less client/leaderboard.css - -To start the project in the built-in Meteor server: - - meteor run - -Tested using Meteor version 0.3.3 and compiled with CoffeeScript version 1.2.0. - -This document is also published as a [blogpost](https://srackham.wordpress.com/2012/04/22/meteor-leaderboard-with-coffeescript-less-and-bootstrap/). - +tukeq zheng zi system, a half day play with meteor, just for fun. diff --git a/client/bootstrap.css b/client/bootstrap.css index 09e2833..0664207 100644 --- a/client/bootstrap.css +++ b/client/bootstrap.css @@ -1,5 +1,5 @@ /*! - * Bootstrap v2.0.3 + * Bootstrap v2.1.0 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -67,12 +67,17 @@ sub { } img { + height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } +#map_canvas img { + max-width: none; +} + button, input, select, @@ -126,6 +131,7 @@ textarea { .clearfix:before, .clearfix:after { display: table; + line-height: 0; content: ""; } @@ -144,18 +150,17 @@ textarea { .input-block-level { display: block; width: 100%; - min-height: 28px; + min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; + font-size: 14px; + line-height: 20px; color: #333333; background-color: #ffffff; } @@ -170,6 +175,28 @@ a:hover { text-decoration: underline; } +.img-rounded { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.img-polaroid { + padding: 4px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.img-circle { + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} + .row { margin-left: -20px; *zoom: 1; @@ -178,6 +205,7 @@ a:hover { .row:before, .row:after { display: table; + line-height: 0; content: ""; } @@ -191,6 +219,7 @@ a:hover { } .container, +.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; @@ -300,6 +329,7 @@ a:hover { .row-fluid:before, .row-fluid:after { display: table; + line-height: 0; content: ""; } @@ -311,12 +341,11 @@ a:hover { display: block; float: left; width: 100%; - min-height: 28px; - margin-left: 2.127659574%; - *margin-left: 2.0744680846382977%; + min-height: 30px; + margin-left: 2.127659574468085%; + *margin-left: 2.074468085106383%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; } @@ -325,63 +354,193 @@ a:hover { } .row-fluid .span12 { - width: 99.99999998999999%; - *width: 99.94680850063828%; + width: 100%; + *width: 99.94680851063829%; } .row-fluid .span11 { - width: 91.489361693%; - *width: 91.4361702036383%; + width: 91.48936170212765%; + *width: 91.43617021276594%; } .row-fluid .span10 { - width: 82.97872339599999%; - *width: 82.92553190663828%; + width: 82.97872340425532%; + *width: 82.92553191489361%; } .row-fluid .span9 { - width: 74.468085099%; - *width: 74.4148936096383%; + width: 74.46808510638297%; + *width: 74.41489361702126%; } .row-fluid .span8 { - width: 65.95744680199999%; - *width: 65.90425531263828%; + width: 65.95744680851064%; + *width: 65.90425531914893%; } .row-fluid .span7 { - width: 57.446808505%; - *width: 57.3936170156383%; + width: 57.44680851063829%; + *width: 57.39361702127659%; } .row-fluid .span6 { - width: 48.93617020799999%; - *width: 48.88297871863829%; + width: 48.93617021276595%; + *width: 48.88297872340425%; } .row-fluid .span5 { - width: 40.425531911%; - *width: 40.3723404216383%; + width: 40.42553191489362%; + *width: 40.37234042553192%; } .row-fluid .span4 { - width: 31.914893614%; - *width: 31.8617021246383%; + width: 31.914893617021278%; + *width: 31.861702127659576%; } .row-fluid .span3 { - width: 23.404255317%; - *width: 23.3510638276383%; + width: 23.404255319148934%; + *width: 23.351063829787233%; } .row-fluid .span2 { - width: 14.89361702%; - *width: 14.8404255306383%; + width: 14.893617021276595%; + *width: 14.840425531914894%; } .row-fluid .span1 { - width: 6.382978723%; - *width: 6.329787233638298%; + width: 6.382978723404255%; + *width: 6.329787234042553%; +} + +.row-fluid .offset12 { + margin-left: 104.25531914893617%; + *margin-left: 104.14893617021275%; +} + +.row-fluid .offset12:first-child { + margin-left: 102.12765957446808%; + *margin-left: 102.02127659574467%; +} + +.row-fluid .offset11 { + margin-left: 95.74468085106382%; + *margin-left: 95.6382978723404%; +} + +.row-fluid .offset11:first-child { + margin-left: 93.61702127659574%; + *margin-left: 93.51063829787232%; +} + +.row-fluid .offset10 { + margin-left: 87.23404255319149%; + *margin-left: 87.12765957446807%; +} + +.row-fluid .offset10:first-child { + margin-left: 85.1063829787234%; + *margin-left: 84.99999999999999%; +} + +.row-fluid .offset9 { + margin-left: 78.72340425531914%; + *margin-left: 78.61702127659572%; +} + +.row-fluid .offset9:first-child { + margin-left: 76.59574468085106%; + *margin-left: 76.48936170212764%; +} + +.row-fluid .offset8 { + margin-left: 70.2127659574468%; + *margin-left: 70.10638297872339%; +} + +.row-fluid .offset8:first-child { + margin-left: 68.08510638297872%; + *margin-left: 67.9787234042553%; +} + +.row-fluid .offset7 { + margin-left: 61.70212765957446%; + *margin-left: 61.59574468085106%; +} + +.row-fluid .offset7:first-child { + margin-left: 59.574468085106375%; + *margin-left: 59.46808510638297%; +} + +.row-fluid .offset6 { + margin-left: 53.191489361702125%; + *margin-left: 53.085106382978715%; +} + +.row-fluid .offset6:first-child { + margin-left: 51.063829787234035%; + *margin-left: 50.95744680851063%; +} + +.row-fluid .offset5 { + margin-left: 44.68085106382979%; + *margin-left: 44.57446808510638%; +} + +.row-fluid .offset5:first-child { + margin-left: 42.5531914893617%; + *margin-left: 42.4468085106383%; +} + +.row-fluid .offset4 { + margin-left: 36.170212765957444%; + *margin-left: 36.06382978723405%; +} + +.row-fluid .offset4:first-child { + margin-left: 34.04255319148936%; + *margin-left: 33.93617021276596%; +} + +.row-fluid .offset3 { + margin-left: 27.659574468085104%; + *margin-left: 27.5531914893617%; +} + +.row-fluid .offset3:first-child { + margin-left: 25.53191489361702%; + *margin-left: 25.425531914893618%; +} + +.row-fluid .offset2 { + margin-left: 19.148936170212764%; + *margin-left: 19.04255319148936%; +} + +.row-fluid .offset2:first-child { + margin-left: 17.02127659574468%; + *margin-left: 16.914893617021278%; +} + +.row-fluid .offset1 { + margin-left: 10.638297872340425%; + *margin-left: 10.53191489361702%; +} + +.row-fluid .offset1:first-child { + margin-left: 8.51063829787234%; + *margin-left: 8.404255319148938%; +} + +[class*="span"].hide, +.row-fluid [class*="span"].hide { + display: none; +} + +[class*="span"].pull-right, +.row-fluid [class*="span"].pull-right { + float: right; } .container { @@ -393,6 +552,7 @@ a:hover { .container:before, .container:after { display: table; + line-height: 0; content: ""; } @@ -409,6 +569,7 @@ a:hover { .container-fluid:before, .container-fluid:after { display: table; + line-height: 0; content: ""; } @@ -417,22 +578,34 @@ a:hover { } p { - margin: 0 0 9px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; -} - -p small { - font-size: 11px; - color: #999999; + margin: 0 0 10px; } .lead { - margin-bottom: 18px; + margin-bottom: 20px; font-size: 20px; font-weight: 200; - line-height: 27px; + line-height: 30px; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +cite { + font-style: normal; +} + +.muted { + color: #999999; } h1, @@ -441,9 +614,10 @@ h3, h4, h5, h6 { - margin: 0; + margin: 10px 0; font-family: inherit; font-weight: bold; + line-height: 1; color: inherit; text-rendering: optimizelegibility; } @@ -455,74 +629,66 @@ h4 small, h5 small, h6 small { font-weight: normal; + line-height: 1; color: #999999; } h1 { - font-size: 30px; - line-height: 36px; -} - -h1 small { - font-size: 18px; + font-size: 36px; + line-height: 40px; } h2 { - font-size: 24px; - line-height: 36px; + font-size: 30px; + line-height: 40px; } -h2 small { - font-size: 18px; +h3 { + font-size: 24px; + line-height: 40px; } -h3 { +h4 { font-size: 18px; - line-height: 27px; + line-height: 20px; } -h3 small { +h5 { font-size: 14px; + line-height: 20px; } -h4, -h5, h6 { - line-height: 18px; + font-size: 12px; + line-height: 20px; } -h4 { - font-size: 14px; +h1 small { + font-size: 24px; } -h4 small { - font-size: 12px; +h2 small { + font-size: 18px; } -h5 { - font-size: 12px; +h3 small { + font-size: 14px; } -h6 { - font-size: 11px; - color: #999999; - text-transform: uppercase; +h4 small { + font-size: 14px; } .page-header { - padding-bottom: 17px; - margin: 18px 0; + padding-bottom: 9px; + margin: 20px 0 30px; border-bottom: 1px solid #eeeeee; } -.page-header h1 { - line-height: 1; -} - ul, ol { padding: 0; - margin: 0 0 9px 25px; + margin: 0 0 10px 25px; } ul ul, @@ -532,16 +698,8 @@ ol ul { margin-bottom: 0; } -ul { - list-style: disc; -} - -ol { - list-style: decimal; -} - li { - line-height: 18px; + line-height: 20px; } ul.unstyled, @@ -551,21 +709,20 @@ ol.unstyled { } dl { - margin-bottom: 18px; + margin-bottom: 20px; } dt, dd { - line-height: 18px; + line-height: 20px; } dt { font-weight: bold; - line-height: 17px; } dd { - margin-left: 9px; + margin-left: 10px; } .dl-horizontal dt { @@ -583,27 +740,15 @@ dd { } hr { - margin: 18px 0; + margin: 20px 0; border: 0; border-top: 1px solid #eeeeee; border-bottom: 1px solid #ffffff; } -strong { - font-weight: bold; -} - -em { - font-style: italic; -} - -.muted { - color: #999999; -} - abbr[title] { cursor: help; - border-bottom: 1px dotted #ddd; + border-bottom: 1px dotted #999999; } abbr.initialism { @@ -613,7 +758,7 @@ abbr.initialism { blockquote { padding: 0 0 0 15px; - margin: 0 0 18px; + margin: 0 0 20px; border-left: 5px solid #eeeeee; } @@ -621,12 +766,12 @@ blockquote p { margin-bottom: 0; font-size: 16px; font-weight: 300; - line-height: 22.5px; + line-height: 25px; } blockquote small { display: block; - line-height: 18px; + line-height: 20px; color: #999999; } @@ -647,6 +792,14 @@ blockquote.pull-right small { text-align: right; } +blockquote.pull-right small:before { + content: ''; +} + +blockquote.pull-right small:after { + content: '\00A0 \2014'; +} + q:before, q:after, blockquote:before, @@ -656,23 +809,15 @@ blockquote:after { address { display: block; - margin-bottom: 18px; - font-style: normal; - line-height: 18px; -} - -small { - font-size: 100%; -} - -cite { + margin-bottom: 20px; font-style: normal; + line-height: 20px; } code, pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: #333333; -webkit-border-radius: 3px; @@ -689,10 +834,10 @@ code { pre { display: block; - padding: 8.5px; - margin: 0 0 9px; - font-size: 12.025px; - line-height: 18px; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; @@ -706,7 +851,7 @@ pre { } pre.prettyprint { - margin-bottom: 18px; + margin-bottom: 20px; } pre code { @@ -722,7 +867,7 @@ pre code { } form { - margin: 0 0 18px; + margin: 0 0 20px; } fieldset { @@ -735,16 +880,16 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 27px; - font-size: 19.5px; - line-height: 36px; + margin-bottom: 20px; + font-size: 21px; + line-height: 40px; color: #333333; border: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } legend small { - font-size: 13.5px; + font-size: 15px; color: #999999; } @@ -753,9 +898,9 @@ input, button, select, textarea { - font-size: 13px; + font-size: 14px; font-weight: normal; - line-height: 18px; + line-height: 20px; } input, @@ -768,101 +913,133 @@ textarea { label { display: block; margin-bottom: 5px; - color: #333333; } -input, -textarea, select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], .uneditable-input { display: inline-block; - width: 210px; - height: 18px; - padding: 4px; + height: 20px; + padding: 4px 6px; margin-bottom: 9px; - font-size: 13px; - line-height: 18px; + font-size: 14px; + line-height: 20px; color: #555555; - background-color: #ffffff; - border: 1px solid #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } -.uneditable-textarea { - width: auto; - height: auto; -} - -label input, -label textarea, -label select { - display: block; +input, +textarea { + width: 210px; } -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; +textarea { height: auto; - padding: 0; - margin: 3px 0; - *margin-top: 0; - /* IE7 */ - - line-height: normal; - cursor: pointer; - background-color: transparent; - border: 0 \9; - /* IE9 and down */ +} - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; } -input[type="image"] { - border: 0; +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - background-color: #ffffff; - background-color: initial; - border: initial; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + *margin-top: 0; + line-height: normal; + cursor: pointer; } -input[type="button"], +input[type="file"], +input[type="image"], +input[type="submit"], input[type="reset"], -input[type="submit"] { +input[type="button"], +input[type="radio"], +input[type="checkbox"] { width: auto; - height: auto; } select, input[type="file"] { - height: 28px; + height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ *margin-top: 4px; /* For IE7, add top margin to align select with labels */ - line-height: 28px; -} - -input[type="file"] { - line-height: 18px \9; + line-height: 30px; } select { width: 220px; background-color: #ffffff; + border: 1px solid #bbb; } select[multiple], @@ -870,18 +1047,49 @@ select[size] { height: auto; } -input[type="image"] { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; } -textarea { +.uneditable-input, +.uneditable-textarea { + color: #999999; + cursor: not-allowed; + background-color: #fcfcfc; + border-color: #cccccc; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); +} + +.uneditable-input { + overflow: hidden; + white-space: nowrap; +} + +.uneditable-textarea { + width: auto; height: auto; } -input[type="hidden"] { - display: none; +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #999999; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #999999; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #999999; } .radio, @@ -914,42 +1122,6 @@ input[type="hidden"] { margin-left: 10px; } -input, -textarea { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -ms-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; -} - -input:focus, -textarea:focus { - border-color: rgba(82, 168, 236, 0.8); - outline: 0; - outline: thin dotted \9; - /* IE6-9 */ - - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -} - -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - outline: thin dotted #333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} - .input-mini { width: 60px; } @@ -986,82 +1158,118 @@ textarea[class*="span"], margin-left: 0; } +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"], +.row-fluid .input-prepend [class*="span"], +.row-fluid .input-append [class*="span"] { + display: inline-block; +} + input, textarea, .uneditable-input { margin-left: 0; } +.controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; +} + input.span12, textarea.span12, .uneditable-input.span12 { - width: 930px; + width: 926px; } input.span11, textarea.span11, .uneditable-input.span11 { - width: 850px; + width: 846px; } input.span10, textarea.span10, .uneditable-input.span10 { - width: 770px; + width: 766px; } input.span9, textarea.span9, .uneditable-input.span9 { - width: 690px; + width: 686px; } input.span8, textarea.span8, .uneditable-input.span8 { - width: 610px; + width: 606px; } input.span7, textarea.span7, .uneditable-input.span7 { - width: 530px; + width: 526px; } input.span6, textarea.span6, .uneditable-input.span6 { - width: 450px; + width: 446px; } input.span5, textarea.span5, .uneditable-input.span5 { - width: 370px; + width: 366px; } input.span4, textarea.span4, .uneditable-input.span4 { - width: 290px; + width: 286px; } input.span3, textarea.span3, .uneditable-input.span3 { - width: 210px; + width: 206px; } input.span2, textarea.span2, .uneditable-input.span2 { - width: 130px; + width: 126px; } input.span1, textarea.span1, .uneditable-input.span1 { - width: 50px; + width: 46px; +} + +.controls-row { + *zoom: 1; +} + +.controls-row:before, +.controls-row:after { + display: table; + line-height: 0; + content: ""; +} + +.controls-row:after { + clear: both; +} + +.controls-row [class*="span"] { + float: left; } input[disabled], @@ -1072,7 +1280,6 @@ select[readonly], textarea[readonly] { cursor: not-allowed; background-color: #eeeeee; - border-color: #ddd; } input[type="radio"][disabled], @@ -1088,20 +1295,27 @@ input[type="checkbox"][readonly] { color: #c09853; } +.control-group.warning .checkbox, +.control-group.warning .radio, .control-group.warning input, .control-group.warning select, .control-group.warning textarea { color: #c09853; border-color: #c09853; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } +.control-group.warning .checkbox:focus, +.control-group.warning .radio:focus, .control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { border-color: #a47e3c; - -webkit-box-shadow: 0 0 6px #dbc59e; - -moz-box-shadow: 0 0 6px #dbc59e; - box-shadow: 0 0 6px #dbc59e; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; } .control-group.warning .input-prepend .add-on, @@ -1117,20 +1331,27 @@ input[type="checkbox"][readonly] { color: #b94a48; } +.control-group.error .checkbox, +.control-group.error .radio, .control-group.error input, .control-group.error select, .control-group.error textarea { color: #b94a48; border-color: #b94a48; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } +.control-group.error .checkbox:focus, +.control-group.error .radio:focus, .control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { border-color: #953b39; - -webkit-box-shadow: 0 0 6px #d59392; - -moz-box-shadow: 0 0 6px #d59392; - box-shadow: 0 0 6px #d59392; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } .control-group.error .input-prepend .add-on, @@ -1146,20 +1367,27 @@ input[type="checkbox"][readonly] { color: #468847; } +.control-group.success .checkbox, +.control-group.success .radio, .control-group.success input, .control-group.success select, .control-group.success textarea { color: #468847; border-color: #468847; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } +.control-group.success .checkbox:focus, +.control-group.success .radio:focus, .control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { border-color: #356635; - -webkit-box-shadow: 0 0 6px #7aba7b; - -moz-box-shadow: 0 0 6px #7aba7b; - box-shadow: 0 0 6px #7aba7b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } .control-group.success .input-prepend .add-on, @@ -1186,17 +1414,18 @@ select:focus:required:invalid:focus { } .form-actions { - padding: 17px 20px 18px; - margin-top: 18px; - margin-bottom: 18px; + padding: 19px 20px 20px; + margin-top: 20px; + margin-bottom: 20px; background-color: #f5f5f5; - border-top: 1px solid #ddd; + border-top: 1px solid #e5e5e5; *zoom: 1; } .form-actions:before, .form-actions:after { display: table; + line-height: 0; content: ""; } @@ -1204,33 +1433,14 @@ select:focus:required:invalid:focus { clear: both; } -.uneditable-input { - overflow: hidden; - white-space: nowrap; - cursor: not-allowed; - background-color: #ffffff; - border-color: #eee; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); -} - -:-moz-placeholder { - color: #999999; -} - -::-webkit-input-placeholder { - color: #999999; -} - .help-block, .help-inline { - color: #555555; + color: #595959; } .help-block { display: block; - margin-bottom: 9px; + margin-bottom: 10px; } .help-inline { @@ -1241,68 +1451,67 @@ select:focus:required:invalid:focus { *zoom: 1; } -.input-prepend, -.input-append { +.input-append, +.input-prepend { margin-bottom: 5px; + font-size: 0; + white-space: nowrap; } -.input-prepend input, .input-append input, -.input-prepend select, +.input-prepend input, .input-append select, -.input-prepend .uneditable-input, -.input-append .uneditable-input { +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input { position: relative; margin-bottom: 0; *margin-left: 0; - vertical-align: middle; + font-size: 14px; + vertical-align: top; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } -.input-prepend input:focus, .input-append input:focus, -.input-prepend select:focus, +.input-prepend input:focus, .input-append select:focus, -.input-prepend .uneditable-input:focus, -.input-append .uneditable-input:focus { +.input-prepend select:focus, +.input-append .uneditable-input:focus, +.input-prepend .uneditable-input:focus { z-index: 2; } -.input-prepend .uneditable-input, -.input-append .uneditable-input { - border-left-color: #ccc; -} - -.input-prepend .add-on, -.input-append .add-on { +.input-append .add-on, +.input-prepend .add-on { display: inline-block; width: auto; - height: 18px; + height: 20px; min-width: 16px; padding: 4px 5px; + font-size: 14px; font-weight: normal; - line-height: 18px; + line-height: 20px; text-align: center; text-shadow: 0 1px 0 #ffffff; - vertical-align: middle; background-color: #eeeeee; border: 1px solid #ccc; } -.input-prepend .add-on, .input-append .add-on, -.input-prepend .btn, -.input-append .btn { +.input-prepend .add-on, +.input-append .btn, +.input-prepend .btn { margin-left: -1px; + vertical-align: top; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } -.input-prepend .active, -.input-append .active { +.input-append .active, +.input-prepend .active { background-color: #a9dba9; border-color: #46a546; } @@ -1324,12 +1533,7 @@ select:focus:required:invalid:focus { .input-append .uneditable-input { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; -} - -.input-append .uneditable-input { - border-right-color: #ccc; - border-left-color: #eee; + border-radius: 3px 0 0 3px; } .input-append .add-on:last-child, @@ -1363,7 +1567,7 @@ select:focus:required:invalid:focus { border-radius: 0 3px 3px 0; } -.search-query { +input.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; @@ -1371,9 +1575,42 @@ select:focus:required:invalid:focus { /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; - -webkit-border-radius: 14px; - -moz-border-radius: 14px; - border-radius: 14px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +/* Allow for input prepend/append in search forms */ + +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.form-search .input-append .search-query { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search .input-append .btn { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .search-query { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .btn { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; } .form-search input, @@ -1400,6 +1637,7 @@ select:focus:required:invalid:focus { display: inline-block; *display: inline; margin-bottom: 0; + vertical-align: middle; *zoom: 1; } @@ -1410,7 +1648,9 @@ select:focus:required:invalid:focus { } .form-search label, -.form-inline label { +.form-inline label, +.form-search .btn-group, +.form-inline .btn-group { display: inline-block; } @@ -1440,22 +1680,23 @@ select:focus:required:invalid:focus { } .control-group { - margin-bottom: 9px; + margin-bottom: 10px; } legend + .control-group { - margin-top: 18px; + margin-top: 20px; -webkit-margin-top-collapse: separate; } .form-horizontal .control-group { - margin-bottom: 18px; + margin-bottom: 20px; *zoom: 1; } .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; + line-height: 0; content: ""; } @@ -1482,7 +1723,7 @@ legend + .control-group { } .form-horizontal .help-block { - margin-top: 9px; + margin-top: 10px; margin-bottom: 0; } @@ -1499,13 +1740,13 @@ table { .table { width: 100%; - margin-bottom: 18px; + margin-bottom: 20px; } .table th, .table td { padding: 8px; - line-height: 18px; + line-height: 20px; text-align: left; vertical-align: top; border-top: 1px solid #dddddd; @@ -1540,7 +1781,7 @@ table { .table-bordered { border: 1px solid #dddddd; border-collapse: separate; - *border-collapse: collapsed; + *border-collapse: collapse; border-left: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; @@ -1579,7 +1820,8 @@ table { } .table-bordered thead:last-child tr:last-child th:first-child, -.table-bordered tbody:last-child tr:last-child td:first-child { +.table-bordered tbody:last-child tr:last-child td:first-child, +.table-bordered tfoot:last-child tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; @@ -1589,22 +1831,48 @@ table { } .table-bordered thead:last-child tr:last-child th:last-child, -.table-bordered tbody:last-child tr:last-child td:last-child { +.table-bordered tbody:last-child tr:last-child td:last-child, +.table-bordered tfoot:last-child tr:last-child td:last-child { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; } +.table-bordered caption + thead tr:first-child th:first-child, +.table-bordered caption + tbody tr:first-child td:first-child, +.table-bordered colgroup + thead tr:first-child th:first-child, +.table-bordered colgroup + tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered caption + thead tr:first-child th:last-child, +.table-bordered caption + tbody tr:first-child td:last-child, +.table-bordered colgroup + thead tr:first-child th:last-child, +.table-bordered colgroup + tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-right-topleft: 4px; +} + .table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { background-color: #f9f9f9; } -.table tbody tr:hover td, -.table tbody tr:hover th { +.table-hover tbody tr:hover td, +.table-hover tbody tr:hover th { background-color: #f5f5f5; } +table [class*=span], +.row-fluid table [class*=span] { + display: table-cell; + float: none; + margin-left: 0; +} + table .span1 { float: none; width: 44px; @@ -1749,11 +2017,24 @@ table .span24 { margin-left: 0; } +.table tbody tr.success td { + background-color: #dff0d8; +} + +.table tbody tr.error td { + background-color: #f2dede; +} + +.table tbody tr.info td { + background-color: #d9edf7; +} + [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; + margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; @@ -1762,12 +2043,15 @@ table .span24 { background-repeat: no-repeat; } -[class^="icon-"]:last-child, -[class*=" icon-"]:last-child { - *margin-left: 0; -} +/* White icons with optional class, or on hover/active states of certain elements */ -.icon-white { +.icon-white, +.nav > .active > a > [class^="icon-"], +.nav > .active > a > [class*=" icon-"], +.dropdown-menu > li > a:hover > [class^="icon-"], +.dropdown-menu > li > a:hover > [class*=" icon-"], +.dropdown-menu > .active > a > [class^="icon-"], +.dropdown-menu > .active > a > [class*=" icon-"] { background-image: url("../img/glyphicons-halflings-white.png"); } @@ -2208,6 +2492,7 @@ table .span24 { } .icon-random { + width: 16px; background-position: -216px -120px; } @@ -2240,6 +2525,7 @@ table .span24 { } .icon-folder-open { + width: 16px; background-position: -408px -120px; } @@ -2354,8 +2640,6 @@ table .span24 { border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; - opacity: 0.3; - filter: alpha(opacity=30); } .dropdown .caret { @@ -2363,12 +2647,6 @@ table .span24 { margin-left: 2px; } -.dropdown:hover .caret, -.open .caret { - opacity: 1; - filter: alpha(opacity=100); -} - .dropdown-menu { position: absolute; top: 100%; @@ -2377,17 +2655,17 @@ table .span24 { display: none; float: left; min-width: 160px; - padding: 4px 0; - margin: 1px 0 0; + padding: 5px 0; + margin: 2px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); @@ -2404,7 +2682,7 @@ table .span24 { .dropdown-menu .divider { *width: 100%; height: 1px; - margin: 8px 1px; + margin: 9px 1px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; @@ -2413,31 +2691,66 @@ table .span24 { .dropdown-menu a { display: block; - padding: 3px 15px; + padding: 3px 20px; clear: both; font-weight: normal; - line-height: 18px; + line-height: 20px; color: #333333; white-space: nowrap; } .dropdown-menu li > a:hover, +.dropdown-menu li > a:focus, +.dropdown-submenu:hover > a { + color: #ffffff; + text-decoration: none; + background-color: #0088cc; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #ffffff; text-decoration: none; background-color: #0088cc; + background-color: #0081c2; + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-repeat: repeat-x; + outline: 0; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + +.dropdown-menu .disabled > a, +.dropdown-menu .disabled > a:hover { + color: #999999; +} + +.dropdown-menu .disabled > a:hover { + text-decoration: none; + cursor: default; + background-color: transparent; } .open { *z-index: 1000; } -.open .dropdown-menu { +.open > .dropdown-menu { display: block; } -.pull-right .dropdown-menu { +.pull-right > .dropdown-menu { right: 0; left: auto; } @@ -2456,6 +2769,47 @@ table .span24 { margin-bottom: 1px; } +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover .dropdown-menu { + display: block; +} + +.dropdown-submenu > a:after { + display: block; + float: right; + width: 0; + height: 0; + margin-top: 5px; + margin-right: -10px; + border-color: transparent; + border-left-color: #cccccc; + border-style: solid; + border-width: 5px 0 5px 5px; + content: " "; +} + +.dropdown-submenu:hover > a:after { + border-left-color: #ffffff; +} + +.dropdown .dropdown-menu .nav-header { + padding-right: 20px; + padding-left: 20px; +} + .typeahead { margin-top: 2px; -webkit-border-radius: 4px; @@ -2468,8 +2822,7 @@ table .span24 { padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -2499,26 +2852,23 @@ table .span24 { .fade { opacity: 0; - filter: alpha(opacity=0); -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; - filter: alpha(opacity=100); } .collapse { position: relative; height: 0; overflow: hidden; + overflow: visible \9; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; - -ms-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; } @@ -2531,7 +2881,7 @@ table .span24 { float: right; font-size: 20px; font-weight: bold; - line-height: 18px; + line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; @@ -2557,11 +2907,11 @@ button.close { .btn { display: inline-block; *display: inline; - padding: 4px 10px 4px; + padding: 4px 14px; margin-bottom: 0; *margin-left: .3em; - font-size: 13px; - line-height: 18px; + font-size: 14px; + line-height: 20px; *line-height: 20px; color: #333333; text-align: center; @@ -2570,22 +2920,21 @@ button.close { cursor: pointer; background-color: #f5f5f5; *background-color: #e6e6e6; - background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; - border: 1px solid #cccccc; + border: 1px solid #bbbbbb; *border: 0; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-bottom-color: #b3b3b3; + border-bottom-color: #a2a2a2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -2598,6 +2947,7 @@ button.close { .btn.active, .btn.disabled, .btn[disabled] { + color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; } @@ -2621,7 +2971,6 @@ button.close { background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } @@ -2657,7 +3006,7 @@ button.close { .btn-large { padding: 9px 14px; - font-size: 15px; + font-size: 16px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; @@ -2665,39 +3014,37 @@ button.close { } .btn-large [class^="icon-"] { - margin-top: 1px; + margin-top: 2px; } .btn-small { - padding: 5px 9px; - font-size: 11px; - line-height: 16px; + padding: 3px 9px; + font-size: 12px; + line-height: 18px; } .btn-small [class^="icon-"] { - margin-top: -1px; + margin-top: 0; } .btn-mini { padding: 2px 6px; font-size: 11px; - line-height: 14px; + line-height: 16px; } -.btn-primary, -.btn-primary:hover, -.btn-warning, -.btn-warning:hover, -.btn-danger, -.btn-danger:hover, -.btn-success, -.btn-success:hover, -.btn-info, -.btn-info:hover, -.btn-inverse, -.btn-inverse:hover { - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +.btn-block { + display: block; + width: 100%; + padding-right: 0; + padding-left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.btn-block + .btn-block { + margin-top: 5px; } .btn-primary.active, @@ -2710,23 +3057,24 @@ button.close { } .btn { - border-color: #ccc; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-color: #c5c5c5; + border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); } .btn-primary { - background-color: #0074cc; - *background-color: #0055cc; - background-image: -ms-linear-gradient(top, #0088cc, #0055cc); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); - background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); - background-image: -o-linear-gradient(top, #0088cc, #0055cc); - background-image: -moz-linear-gradient(top, #0088cc, #0055cc); - background-image: linear-gradient(top, #0088cc, #0055cc); + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #006dcc; + *background-color: #0044cc; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); + background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); + background-image: -o-linear-gradient(top, #0088cc, #0044cc); + background-image: linear-gradient(to bottom, #0088cc, #0044cc); + background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-repeat: repeat-x; - border-color: #0055cc #0055cc #003580; + border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2735,28 +3083,30 @@ button.close { .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { - background-color: #0055cc; - *background-color: #004ab3; + color: #ffffff; + background-color: #0044cc; + *background-color: #003bb3; } .btn-primary:active, .btn-primary.active { - background-color: #004099 \9; + background-color: #003399 \9; } .btn-warning { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #faa732; *background-color: #f89406; - background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); background-image: -moz-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; border-color: #f89406 #f89406 #ad6704; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2765,6 +3115,7 @@ button.close { .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { + color: #ffffff; background-color: #f89406; *background-color: #df8505; } @@ -2775,18 +3126,19 @@ button.close { } .btn-danger { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #da4f49; *background-color: #bd362f; - background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); + background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); - background-image: linear-gradient(top, #ee5f5b, #bd362f); background-repeat: repeat-x; border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2795,6 +3147,7 @@ button.close { .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { + color: #ffffff; background-color: #bd362f; *background-color: #a9302a; } @@ -2805,18 +3158,19 @@ button.close { } .btn-success { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #5bb75b; *background-color: #51a351; - background-image: -ms-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); + background-image: linear-gradient(to bottom, #62c462, #51a351); background-image: -moz-linear-gradient(top, #62c462, #51a351); - background-image: linear-gradient(top, #62c462, #51a351); background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2825,6 +3179,7 @@ button.close { .btn-success.active, .btn-success.disabled, .btn-success[disabled] { + color: #ffffff; background-color: #51a351; *background-color: #499249; } @@ -2835,18 +3190,19 @@ button.close { } .btn-info { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #49afcd; *background-color: #2f96b4; - background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); + background-image: linear-gradient(to bottom, #5bc0de, #2f96b4); background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); - background-image: linear-gradient(top, #5bc0de, #2f96b4); background-repeat: repeat-x; border-color: #2f96b4 #2f96b4 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2855,6 +3211,7 @@ button.close { .btn-info.active, .btn-info.disabled, .btn-info[disabled] { + color: #ffffff; background-color: #2f96b4; *background-color: #2a85a0; } @@ -2865,18 +3222,19 @@ button.close { } .btn-inverse { - background-color: #414141; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #363636; *background-color: #222222; - background-image: -ms-linear-gradient(top, #555555, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222)); - background-image: -webkit-linear-gradient(top, #555555, #222222); - background-image: -o-linear-gradient(top, #555555, #222222); - background-image: -moz-linear-gradient(top, #555555, #222222); - background-image: linear-gradient(top, #555555, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); + background-image: -webkit-linear-gradient(top, #444444, #222222); + background-image: -o-linear-gradient(top, #444444, #222222); + background-image: linear-gradient(to bottom, #444444, #222222); + background-image: -moz-linear-gradient(top, #444444, #222222); background-repeat: repeat-x; border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2885,6 +3243,7 @@ button.close { .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { + color: #ffffff; background-color: #222222; *background-color: #151515; } @@ -2896,8 +3255,8 @@ button.close { button.btn, input[type="submit"].btn { - *padding-top: 2px; - *padding-bottom: 2px; + *padding-top: 3px; + *padding-bottom: 3px; } button.btn::-moz-focus-inner, @@ -2924,20 +3283,35 @@ input[type="submit"].btn.btn-mini { *padding-bottom: 1px; } -.btn-group { - position: relative; - *margin-left: .3em; - *zoom: 1; +.btn-link, +.btn-link:active { + background-color: transparent; + background-image: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } -.btn-group:before, -.btn-group:after { - display: table; - content: ""; +.btn-link { + color: #0088cc; + cursor: pointer; + border-color: transparent; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } -.btn-group:after { - clear: both; +.btn-link:hover { + color: #005580; + text-decoration: underline; + background-color: transparent; +} + +.btn-group { + position: relative; + *margin-left: .3em; + font-size: 0; + white-space: nowrap; } .btn-group:first-child { @@ -2949,8 +3323,9 @@ input[type="submit"].btn.btn-mini { } .btn-toolbar { - margin-top: 9px; - margin-bottom: 9px; + margin-top: 10px; + margin-bottom: 10px; + font-size: 0; } .btn-toolbar .btn-group { @@ -2961,15 +3336,40 @@ input[type="submit"].btn.btn-mini { *zoom: 1; } +.btn-toolbar .btn + .btn, +.btn-toolbar .btn-group + .btn, +.btn-toolbar .btn + .btn-group { + margin-left: 5px; +} + .btn-group > .btn { position: relative; - float: left; - margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } +.btn-group > .btn + .btn { + margin-left: -1px; +} + +.btn-group > .btn, +.btn-group > .dropdown-menu { + font-size: 14px; +} + +.btn-group > .btn-mini { + font-size: 11px; +} + +.btn-group > .btn-small { + font-size: 12px; +} + +.btn-group > .btn-large { + font-size: 16px; +} + .btn-group > .btn:first-child { margin-left: 0; -webkit-border-bottom-left-radius: 4px; @@ -3022,28 +3422,32 @@ input[type="submit"].btn.btn-mini { outline: 0; } -.btn-group > .dropdown-toggle { - *padding-top: 4px; +.btn-group > .btn + .dropdown-toggle { + *padding-top: 5px; padding-right: 8px; - *padding-bottom: 4px; + *padding-bottom: 5px; padding-left: 8px; -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } -.btn-group > .btn-mini.dropdown-toggle { +.btn-group > .btn-mini + .dropdown-toggle { + *padding-top: 2px; padding-right: 5px; + *padding-bottom: 2px; padding-left: 5px; } -.btn-group > .btn-small.dropdown-toggle { - *padding-top: 4px; +.btn-group > .btn-small + .dropdown-toggle { + *padding-top: 5px; *padding-bottom: 4px; } -.btn-group > .btn-large.dropdown-toggle { +.btn-group > .btn-large + .dropdown-toggle { + *padding-top: 7px; padding-right: 12px; + *padding-bottom: 7px; padding-left: 12px; } @@ -3059,7 +3463,7 @@ input[type="submit"].btn.btn-mini { } .btn-group.open .btn-primary.dropdown-toggle { - background-color: #0055cc; + background-color: #0044cc; } .btn-group.open .btn-warning.dropdown-toggle { @@ -3083,51 +3487,86 @@ input[type="submit"].btn.btn-mini { } .btn .caret { - margin-top: 7px; + margin-top: 8px; margin-left: 0; } -.btn:hover .caret, -.open.btn-group .caret { - opacity: 1; - filter: alpha(opacity=100); +.btn-mini .caret, +.btn-small .caret, +.btn-large .caret { + margin-top: 6px; +} + +.btn-large .caret { + border-top-width: 5px; + border-right-width: 5px; + border-left-width: 5px; +} + +.dropup .btn-large .caret { + border-top: 0; + border-bottom: 5px solid #000000; +} + +.btn-primary .caret, +.btn-warning .caret, +.btn-danger .caret, +.btn-info .caret, +.btn-success .caret, +.btn-inverse .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} + +.btn-group-vertical { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; +} + +.btn-group-vertical .btn { + display: block; + float: none; + width: 100%; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } -.btn-mini .caret { - margin-top: 5px; +.btn-group-vertical .btn + .btn { + margin-top: -1px; + margin-left: 0; } -.btn-small .caret { - margin-top: 6px; +.btn-group-vertical .btn:first-child { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } -.btn-large .caret { - margin-top: 6px; - border-top-width: 5px; - border-right-width: 5px; - border-left-width: 5px; +.btn-group-vertical .btn:last-child { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } -.dropup .btn-large .caret { - border-top: 0; - border-bottom: 5px solid #000000; +.btn-group-vertical .btn-large:first-child { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; } -.btn-primary .caret, -.btn-warning .caret, -.btn-danger .caret, -.btn-info .caret, -.btn-success .caret, -.btn-inverse .caret { - border-top-color: #ffffff; - border-bottom-color: #ffffff; - opacity: 0.75; - filter: alpha(opacity=75); +.btn-group-vertical .btn-large:last-child { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; } .alert { padding: 8px 35px 8px 14px; - margin-bottom: 18px; + margin-bottom: 20px; color: #c09853; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; @@ -3137,15 +3576,15 @@ input[type="submit"].btn.btn-mini { border-radius: 4px; } -.alert-heading { - color: inherit; +.alert h4 { + margin: 0; } .alert .close { position: relative; top: -2px; right: -21px; - line-height: 18px; + line-height: 20px; } .alert-success { @@ -3182,7 +3621,7 @@ input[type="submit"].btn.btn-mini { } .nav { - margin-bottom: 18px; + margin-bottom: 20px; margin-left: 0; list-style: none; } @@ -3200,12 +3639,12 @@ input[type="submit"].btn.btn-mini { float: right; } -.nav .nav-header { +.nav-header { display: block; padding: 3px 15px; font-size: 11px; font-weight: bold; - line-height: 18px; + line-height: 20px; color: #999999; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-transform: uppercase; @@ -3246,7 +3685,7 @@ input[type="submit"].btn.btn-mini { .nav-list .divider { *width: 100%; height: 1px; - margin: 8px 1px; + margin: 9px 1px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; @@ -3263,6 +3702,7 @@ input[type="submit"].btn.btn-mini { .nav-tabs:after, .nav-pills:after { display: table; + line-height: 0; content: ""; } @@ -3295,7 +3735,7 @@ input[type="submit"].btn.btn-mini { .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; - line-height: 18px; + line-height: 20px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; @@ -3351,15 +3791,21 @@ input[type="submit"].btn.btn-mini { } .nav-tabs.nav-stacked > li:first-child > a { - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-topleft: 4px; } .nav-tabs.nav-stacked > li:last-child > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; } .nav-tabs.nav-stacked > li > a:hover { @@ -3376,38 +3822,45 @@ input[type="submit"].btn.btn-mini { } .nav-tabs .dropdown-menu { - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; } .nav-pills .dropdown-menu { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } -.nav-tabs .dropdown-toggle .caret, -.nav-pills .dropdown-toggle .caret { +.nav .dropdown-toggle .caret { margin-top: 6px; border-top-color: #0088cc; border-bottom-color: #0088cc; } -.nav-tabs .dropdown-toggle:hover .caret, -.nav-pills .dropdown-toggle:hover .caret { +.nav .dropdown-toggle:hover .caret { border-top-color: #005580; border-bottom-color: #005580; } -.nav-tabs .active .dropdown-toggle .caret, -.nav-pills .active .dropdown-toggle .caret { - border-top-color: #333333; - border-bottom-color: #333333; +/* move down carets for tabs */ + +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} + +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} + +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; } .nav > .dropdown.active > a:hover { - color: #000000; cursor: pointer; } @@ -3439,6 +3892,7 @@ input[type="submit"].btn.btn-mini { .tabbable:before, .tabbable:after { display: table; + line-height: 0; content: ""; } @@ -3549,32 +4003,43 @@ input[type="submit"].btn.btn-mini { *border-left-color: #ffffff; } +.nav > .disabled > a { + color: #999999; +} + +.nav > .disabled > a:hover { + text-decoration: none; + cursor: default; + background-color: transparent; +} + .navbar { *position: relative; *z-index: 2; - margin-bottom: 18px; + margin-bottom: 20px; overflow: visible; + color: #555555; } .navbar-inner { min-height: 40px; padding-right: 20px; padding-left: 20px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); + background-color: #fafafa; + background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); + background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); + background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); background-repeat: repeat-x; + border: 1px solid #d4d4d4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); } .navbar .container { @@ -3585,41 +4050,44 @@ input[type="submit"].btn.btn-mini { height: auto; } -.navbar { - color: #999999; -} - -.navbar .brand:hover { - text-decoration: none; -} - .navbar .brand { display: block; float: left; - padding: 8px 20px 12px; + padding: 10px 20px 10px; margin-left: -20px; font-size: 20px; font-weight: 200; - line-height: 1; - color: #999999; + color: #555555; + text-shadow: 0 1px 0 #ffffff; +} + +.navbar .brand:hover { + text-decoration: none; } -.navbar .navbar-text { +.navbar-text { margin-bottom: 0; line-height: 40px; } -.navbar .navbar-link { - color: #999999; +.navbar-link { + color: #555555; } -.navbar .navbar-link:hover { - color: #ffffff; +.navbar-link:hover { + color: #333333; +} + +.navbar .divider-vertical { + height: 40px; + margin: 0 9px; + border-right: 1px solid #ffffff; + border-left: 1px solid #f2f2f2; } .navbar .btn, .navbar .btn-group { - margin-top: 5px; + margin-top: 6px; } .navbar .btn-group .btn { @@ -3634,6 +4102,7 @@ input[type="submit"].btn.btn-mini { .navbar-form:before, .navbar-form:after { display: table; + line-height: 0; content: ""; } @@ -3649,7 +4118,8 @@ input[type="submit"].btn.btn-mini { } .navbar-form input, -.navbar-form select { +.navbar-form select, +.navbar-form .btn { display: inline-block; margin-bottom: 0; } @@ -3674,48 +4144,32 @@ input[type="submit"].btn.btn-mini { .navbar-search { position: relative; float: left; - margin-top: 6px; + margin-top: 5px; margin-bottom: 0; } .navbar-search .search-query { - padding: 4px 9px; + padding: 4px 14px; + margin-bottom: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 1; - color: #ffffff; - background-color: #626262; - border: 1px solid #151515; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; -} - -.navbar-search .search-query:-moz-placeholder { - color: #cccccc; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; } -.navbar-search .search-query::-webkit-input-placeholder { - color: #cccccc; +.navbar-static-top { + position: static; + width: 100%; + margin-bottom: 0; } -.navbar-search .search-query:focus, -.navbar-search .search-query.focused { - padding: 5px 10px; - color: #333333; - text-shadow: 0 1px 0 #ffffff; - background-color: #ffffff; - border: 0; - outline: 0; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); +.navbar-static-top .navbar-inner { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } .navbar-fixed-top, @@ -3727,6 +4181,12 @@ input[type="submit"].btn.btn-mini { margin-bottom: 0; } +.navbar-fixed-top .navbar-inner, +.navbar-fixed-bottom .navbar-inner, +.navbar-static-top .navbar-inner { + border: 0; +} + .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding-right: 0; @@ -3736,6 +4196,7 @@ input[type="submit"].btn.btn-mini { border-radius: 0; } +.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; @@ -3745,10 +4206,23 @@ input[type="submit"].btn.btn-mini { top: 0; } +.navbar-fixed-top .navbar-inner, +.navbar-static-top .navbar-inner { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); +} + .navbar-fixed-bottom { bottom: 0; } +.navbar-fixed-bottom .navbar-inner { + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1); +} + .navbar .nav { position: relative; left: 0; @@ -3762,56 +4236,37 @@ input[type="submit"].btn.btn-mini { } .navbar .nav > li { - display: block; float: left; } .navbar .nav > li > a { float: none; - padding: 9px 10px 11px; - line-height: 19px; - color: #999999; + padding: 10px 15px 10px; + color: #555555; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} - -.navbar .btn { - display: inline-block; - padding: 4px 10px 4px; - margin: 5px 5px 6px; - line-height: 18px; + text-shadow: 0 1px 0 #ffffff; } -.navbar .btn-group { - padding: 5px 5px 6px; - margin: 0; +.navbar .nav .dropdown-toggle .caret { + margin-top: 8px; } +.navbar .nav > li > a:focus, .navbar .nav > li > a:hover { - color: #ffffff; + color: #333333; text-decoration: none; background-color: transparent; } -.navbar .nav .active > a, -.navbar .nav .active > a:hover { - color: #ffffff; +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: #555555; text-decoration: none; - background-color: #222222; -} - -.navbar .divider-vertical { - width: 1px; - height: 40px; - margin: 0 9px; - overflow: hidden; - background-color: #222222; - border-right: 1px solid #333333; -} - -.navbar .nav.pull-right { - margin-right: 0; - margin-left: 10px; + background-color: #e5e5e5; + -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); } .navbar .btn-navbar { @@ -3820,18 +4275,19 @@ input[type="submit"].btn.btn-mini { padding: 7px 10px; margin-right: 5px; margin-left: 5px; - background-color: #2c2c2c; - *background-color: #222222; - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); - background-image: -moz-linear-gradient(top, #333333, #222222); + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #ededed; + *background-color: #e5e5e5; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5)); + background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); + background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5); background-repeat: repeat-x; - border-color: #222222 #222222 #000000; + border-color: #e5e5e5 #e5e5e5 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); @@ -3843,13 +4299,14 @@ input[type="submit"].btn.btn-mini { .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] { - background-color: #222222; - *background-color: #151515; + color: #ffffff; + background-color: #e5e5e5; + *background-color: #d9d9d9; } .navbar .btn-navbar:active, .navbar .btn-navbar.active { - background-color: #080808 \9; + background-color: #cccccc \9; } .navbar .btn-navbar .icon-bar { @@ -3869,7 +4326,7 @@ input[type="submit"].btn.btn-mini { margin-top: 3px; } -.navbar .dropdown-menu:before { +.navbar .nav > li > .dropdown-menu:before { position: absolute; top: -7px; left: 9px; @@ -3881,7 +4338,7 @@ input[type="submit"].btn.btn-mini { content: ''; } -.navbar .dropdown-menu:after { +.navbar .nav > li > .dropdown-menu:after { position: absolute; top: -6px; left: 10px; @@ -3892,80 +4349,219 @@ input[type="submit"].btn.btn-mini { content: ''; } -.navbar-fixed-bottom .dropdown-menu:before { - top: auto; - bottom: -7px; - border-top: 7px solid #ccc; - border-bottom: 0; - border-top-color: rgba(0, 0, 0, 0.2); +.navbar-fixed-bottom .nav > li > .dropdown-menu:before { + top: auto; + bottom: -7px; + border-top: 7px solid #ccc; + border-bottom: 0; + border-top-color: rgba(0, 0, 0, 0.2); +} + +.navbar-fixed-bottom .nav > li > .dropdown-menu:after { + top: auto; + bottom: -6px; + border-top: 6px solid #ffffff; + border-bottom: 0; +} + +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { + color: #555555; + background-color: #e5e5e5; +} + +.navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + +.navbar .pull-right > li > .dropdown-menu, +.navbar .nav > li > .dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu:before, +.navbar .nav > li > .dropdown-menu.pull-right:before { + right: 12px; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu:after, +.navbar .nav > li > .dropdown-menu.pull-right:after { + right: 13px; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu .dropdown-menu, +.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu { + right: 100%; + left: auto; + margin-right: -1px; + margin-left: 0; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +.navbar-inverse { + color: #999999; +} + +.navbar-inverse .navbar-inner { + background-color: #1b1b1b; + background-image: -moz-linear-gradient(top, #222222, #111111); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); + background-image: -webkit-linear-gradient(top, #222222, #111111); + background-image: -o-linear-gradient(top, #222222, #111111); + background-image: linear-gradient(to bottom, #222222, #111111); + background-repeat: repeat-x; + border-color: #252525; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); +} + +.navbar-inverse .brand, +.navbar-inverse .nav > li > a { + color: #999999; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} + +.navbar-inverse .brand:hover, +.navbar-inverse .nav > li > a:hover { + color: #ffffff; +} + +.navbar-inverse .nav > li > a:focus, +.navbar-inverse .nav > li > a:hover { + color: #ffffff; + background-color: transparent; +} + +.navbar-inverse .nav .active > a, +.navbar-inverse .nav .active > a:hover, +.navbar-inverse .nav .active > a:focus { + color: #ffffff; + background-color: #111111; +} + +.navbar-inverse .navbar-link { + color: #999999; +} + +.navbar-inverse .navbar-link:hover { + color: #ffffff; } -.navbar-fixed-bottom .dropdown-menu:after { - top: auto; - bottom: -6px; - border-top: 6px solid #ffffff; - border-bottom: 0; +.navbar-inverse .divider-vertical { + border-right-color: #222222; + border-left-color: #111111; +} + +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { + color: #ffffff; + background-color: #111111; +} + +.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #999999; + border-bottom-color: #999999; } -.navbar .nav li.dropdown .dropdown-toggle .caret, -.navbar .nav li.dropdown.open .caret { +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } -.navbar .nav li.dropdown.active .caret { - opacity: 1; - filter: alpha(opacity=100); +.navbar-inverse .navbar-search .search-query { + color: #ffffff; + background-color: #515151; + border-color: #111111; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; } -.navbar .nav li.dropdown.open > .dropdown-toggle, -.navbar .nav li.dropdown.active > .dropdown-toggle, -.navbar .nav li.dropdown.open.active > .dropdown-toggle { - background-color: transparent; +.navbar-inverse .navbar-search .search-query:-moz-placeholder { + color: #cccccc; } -.navbar .nav li.dropdown.active > .dropdown-toggle:hover { - color: #ffffff; +.navbar-inverse .navbar-search .search-query:-ms-input-placeholder { + color: #cccccc; } -.navbar .pull-right .dropdown-menu, -.navbar .dropdown-menu.pull-right { - right: 0; - left: auto; +.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder { + color: #cccccc; } -.navbar .pull-right .dropdown-menu:before, -.navbar .dropdown-menu.pull-right:before { - right: 12px; - left: auto; +.navbar-inverse .navbar-search .search-query:focus, +.navbar-inverse .navbar-search .search-query.focused { + padding: 5px 15px; + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + border: 0; + outline: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } -.navbar .pull-right .dropdown-menu:after, -.navbar .dropdown-menu.pull-right:after { - right: 13px; - left: auto; +.navbar-inverse .btn-navbar { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #0e0e0e; + *background-color: #040404; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); + background-image: -webkit-linear-gradient(top, #151515, #040404); + background-image: -o-linear-gradient(top, #151515, #040404); + background-image: linear-gradient(to bottom, #151515, #040404); + background-image: -moz-linear-gradient(top, #151515, #040404); + background-repeat: repeat-x; + border-color: #040404 #040404 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); +} + +.navbar-inverse .btn-navbar:hover, +.navbar-inverse .btn-navbar:active, +.navbar-inverse .btn-navbar.active, +.navbar-inverse .btn-navbar.disabled, +.navbar-inverse .btn-navbar[disabled] { + color: #ffffff; + background-color: #040404; + *background-color: #000000; +} + +.navbar-inverse .btn-navbar:active, +.navbar-inverse .btn-navbar.active { + background-color: #000000 \9; } .breadcrumb { - padding: 7px 14px; - margin: 0 0 18px; + padding: 8px 15px; + margin: 0 0 20px; list-style: none; - background-color: #fbfbfb; - background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5)); - background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); - background-image: linear-gradient(top, #ffffff, #f5f5f5); - background-repeat: repeat-x; - border: 1px solid #ddd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; + background-color: #f5f5f5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } .breadcrumb li { @@ -3977,16 +4573,16 @@ input[type="submit"].btn.btn-mini { .breadcrumb .divider { padding: 0 5px; - color: #999999; + color: #ccc; } -.breadcrumb .active a { - color: #333333; +.breadcrumb .active { + color: #999999; } .pagination { - height: 36px; - margin: 18px 0; + height: 40px; + margin: 20px 0; } .pagination ul { @@ -4007,21 +4603,25 @@ input[type="submit"].btn.btn-mini { display: inline; } -.pagination a { +.pagination a, +.pagination span { float: left; padding: 0 14px; - line-height: 34px; + line-height: 38px; text-decoration: none; - border: 1px solid #ddd; + background-color: #ffffff; + border: 1px solid #dddddd; border-left-width: 0; } .pagination a:hover, -.pagination .active a { +.pagination .active a, +.pagination .active span { background-color: #f5f5f5; } -.pagination .active a { +.pagination .active a, +.pagination .active span { color: #999999; cursor: default; } @@ -4034,14 +4634,16 @@ input[type="submit"].btn.btn-mini { background-color: transparent; } -.pagination li:first-child a { +.pagination li:first-child a, +.pagination li:first-child span { border-left-width: 1px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } -.pagination li:last-child a { +.pagination li:last-child a, +.pagination li:last-child span { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; @@ -4056,8 +4658,7 @@ input[type="submit"].btn.btn-mini { } .pager { - margin-bottom: 18px; - margin-left: 0; + margin: 20px 0; text-align: center; list-style: none; *zoom: 1; @@ -4066,6 +4667,7 @@ input[type="submit"].btn.btn-mini { .pager:before, .pager:after { display: table; + line-height: 0; content: ""; } @@ -4120,7 +4722,7 @@ input[type="submit"].btn.btn-mini { } .modal-open .tooltip { - z-index: 2070; + z-index: 2080; } .modal-backdrop { @@ -4170,7 +4772,6 @@ input[type="submit"].btn.btn-mini { top: -25%; -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; -moz-transition: opacity 0.3s linear, top 0.3s ease-out; - -ms-transition: opacity 0.3s linear, top 0.3s ease-out; -o-transition: opacity 0.3s linear, top 0.3s ease-out; transition: opacity 0.3s linear, top 0.3s ease-out; } @@ -4188,6 +4789,11 @@ input[type="submit"].btn.btn-mini { margin-top: 2px; } +.modal-header h3 { + margin: 0; + line-height: 30px; +} + .modal-body { max-height: 400px; padding: 15px; @@ -4216,6 +4822,7 @@ input[type="submit"].btn.btn-mini { .modal-footer:before, .modal-footer:after { display: table; + line-height: 0; content: ""; } @@ -4234,7 +4841,7 @@ input[type="submit"].btn.btn-mini { .tooltip { position: absolute; - z-index: 1020; + z-index: 1030; display: block; padding: 5px; font-size: 11px; @@ -4249,55 +4856,19 @@ input[type="submit"].btn.btn-mini { } .tooltip.top { - margin-top: -2px; + margin-top: -3px; } .tooltip.right { - margin-left: 2px; + margin-left: 3px; } .tooltip.bottom { - margin-top: 2px; + margin-top: 3px; } .tooltip.left { - margin-left: -2px; -} - -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-top: 5px solid #000000; - border-right: 5px solid transparent; - border-left: 5px solid transparent; -} - -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; -} - -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; - border-left: 5px solid transparent; -} - -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-right: 5px solid #000000; - border-bottom: 5px solid transparent; + margin-left: -3px; } .tooltip-inner { @@ -4316,6 +4887,40 @@ input[type="submit"].btn.btn-mini { position: absolute; width: 0; height: 0; + border-color: transparent; + border-style: solid; +} + +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-top-color: #000000; + border-width: 5px 5px 0; +} + +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-right-color: #000000; + border-width: 5px 5px 5px 0; +} + +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-left-color: #000000; + border-width: 5px 0 5px 5px; +} + +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-bottom-color: #000000; + border-width: 0 5px 5px; } .popover { @@ -4324,106 +4929,134 @@ input[type="submit"].btn.btn-mini { left: 0; z-index: 1010; display: none; - padding: 5px; + width: 236px; + padding: 1px; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .popover.top { - margin-top: -5px; + margin-bottom: 10px; } .popover.right { - margin-left: 5px; + margin-left: 10px; } .popover.bottom { - margin-top: 5px; + margin-top: 10px; } .popover.left { - margin-left: -5px; + margin-right: 10px; } -.popover.top .arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-top: 5px solid #000000; - border-right: 5px solid transparent; - border-left: 5px solid transparent; +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } -.popover.right .arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-right: 5px solid #000000; - border-bottom: 5px solid transparent; +.popover-content { + padding: 9px 14px; } -.popover.bottom .arrow { - top: 0; +.popover-content p, +.popover-content ul, +.popover-content ol { + margin-bottom: 0; +} + +.popover .arrow, +.popover .arrow:after { + position: absolute; + display: inline-block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.popover .arrow:after { + z-index: -1; + content: ""; +} + +.popover.top .arrow { + bottom: -10px; left: 50%; - margin-left: -5px; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; - border-left: 5px solid transparent; + margin-left: -10px; + border-top-color: #ffffff; + border-width: 10px 10px 0; } -.popover.left .arrow { +.popover.top .arrow:after { + bottom: -1px; + left: -11px; + border-top-color: rgba(0, 0, 0, 0.25); + border-width: 11px 11px 0; +} + +.popover.right .arrow { top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; + left: -10px; + margin-top: -10px; + border-right-color: #ffffff; + border-width: 10px 10px 10px 0; } -.popover .arrow { - position: absolute; - width: 0; - height: 0; +.popover.right .arrow:after { + bottom: -11px; + left: -1px; + border-right-color: rgba(0, 0, 0, 0.25); + border-width: 11px 11px 11px 0; } -.popover-inner { - width: 280px; - padding: 3px; - overflow: hidden; - background: #000000; - background: rgba(0, 0, 0, 0.8); - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); +.popover.bottom .arrow { + top: -10px; + left: 50%; + margin-left: -10px; + border-bottom-color: #ffffff; + border-width: 0 10px 10px; } -.popover-title { - padding: 9px 15px; - line-height: 1; - background-color: #f5f5f5; - border-bottom: 1px solid #eee; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; +.popover.bottom .arrow:after { + top: -1px; + left: -11px; + border-bottom-color: rgba(0, 0, 0, 0.25); + border-width: 0 11px 11px; } -.popover-content { - padding: 14px; - background-color: #ffffff; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; +.popover.left .arrow { + top: 50%; + right: -10px; + margin-top: -10px; + border-left-color: #ffffff; + border-width: 10px 0 10px 10px; } -.popover-content p, -.popover-content ul, -.popover-content ol { - margin-bottom: 0; +.popover.left .arrow:after { + right: -1px; + bottom: -11px; + border-left-color: rgba(0, 0, 0, 0.25); + border-width: 11px 0 11px 11px; } .thumbnails { @@ -4435,6 +5068,7 @@ input[type="submit"].btn.btn-mini { .thumbnails:before, .thumbnails:after { display: table; + line-height: 0; content: ""; } @@ -4448,21 +5082,25 @@ input[type="submit"].btn.btn-mini { .thumbnails > li { float: left; - margin-bottom: 18px; + margin-bottom: 20px; margin-left: 20px; } .thumbnail { display: block; padding: 4px; - line-height: 1; + line-height: 20px; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } a.thumbnail:hover { @@ -4481,11 +5119,12 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; + color: #555555; } .label, .badge { - font-size: 10.998px; + font-size: 11.844px; font-weight: bold; line-height: 14px; color: #ffffff; @@ -4566,6 +5205,17 @@ a.badge:hover { background-color: #1a1a1a; } +.btn .label, +.btn .badge { + position: relative; + top: -1px; +} + +.btn-mini .label, +.btn-mini .badge { + top: 0; +} + @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; @@ -4612,29 +5262,29 @@ a.badge:hover { } .progress { - height: 18px; - margin-bottom: 18px; + height: 20px; + margin-bottom: 20px; overflow: hidden; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress .bar { + float: left; width: 0; - height: 18px; + height: 100%; font-size: 12px; color: #ffffff; text-align: center; @@ -4644,32 +5294,34 @@ a.badge:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); - background-image: linear-gradient(top, #149bdf, #0480be); - background-image: -ms-linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } +.progress .bar + .bar { + -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); +} + .progress-striped .bar { background-color: #149bdf; - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; @@ -4684,96 +5336,96 @@ a.badge:hover { animation: progress-bar-stripes 2s linear infinite; } -.progress-danger .bar { +.progress-danger .bar, +.progress .bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); - background-image: linear-gradient(top, #ee5f5b, #c43c35); + background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } -.progress-danger.progress-striped .bar { +.progress-danger.progress-striped .bar, +.progress-striped .bar-danger { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } -.progress-success .bar { +.progress-success .bar, +.progress .bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } -.progress-success.progress-striped .bar { +.progress-success.progress-striped .bar, +.progress-striped .bar-success { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } -.progress-info .bar { +.progress-info .bar, +.progress .bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } -.progress-info.progress-striped .bar { +.progress-info.progress-striped .bar, +.progress-striped .bar-info { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } -.progress-warning .bar { +.progress-warning .bar, +.progress .bar-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); - background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } -.progress-warning.progress-striped .bar { +.progress-warning.progress-striped .bar, +.progress-striped .bar-warning { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .accordion { - margin-bottom: 18px; + margin-bottom: 20px; } .accordion-group { @@ -4804,7 +5456,7 @@ a.badge:hover { .carousel { position: relative; - margin-bottom: 18px; + margin-bottom: 20px; line-height: 1; } @@ -4819,7 +5471,6 @@ a.badge:hover { display: none; -webkit-transition: 0.6s ease-in-out left; -moz-transition: 0.6s ease-in-out left; - -ms-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; } @@ -4905,16 +5556,25 @@ a.badge:hover { right: 0; bottom: 0; left: 0; - padding: 10px 15px 5px; + padding: 15px; background: #333333; background: rgba(0, 0, 0, 0.75); } .carousel-caption h4, .carousel-caption p { + line-height: 20px; color: #ffffff; } +.carousel-caption h4 { + margin: 0 0 5px; +} + +.carousel-caption p { + margin-bottom: 0; +} + .hero-unit { padding: 60px; margin-bottom: 30px; @@ -4935,7 +5595,7 @@ a.badge:hover { .hero-unit p { font-size: 18px; font-weight: 200; - line-height: 27px; + line-height: 30px; color: inherit; } @@ -4958,3 +5618,7 @@ a.badge:hover { .invisible { visibility: hidden; } + +.affix { + position: fixed; +} diff --git a/client/leaderboard.html b/client/leaderboard.html index 8204f87..54843c0 100644 --- a/client/leaderboard.html +++ b/client/leaderboard.html @@ -1,5 +1,6 @@ - Leaderboard + + 正字系统 @@ -11,56 +12,148 @@ -
+
{{> leaderboard}}
+ + + + + + + + + \ No newline at end of file diff --git a/client/leaderboard.less b/client/leaderboard.less index 3a29396..65a67b5 100644 --- a/client/leaderboard.less +++ b/client/leaderboard.less @@ -1,8 +1,39 @@ +html, body { + width: 100%; + height: 100%; + overflow: hidden; +} + body { /* Offset the container below the topbar */ padding-top: 60px; } +.container-fluid { + width: 100%; + height: 100%; +} + +.row-fluid.info { + width: 100%; + height: 100%; + > div { + height: 100%; + > .logs { + height: 50%; + overflow-y: scroll; + } + > .chat { + height: 50%; + overflow-y: scroll; + } + } +} +.row-fluid.chat { + widows: 100%; + height: 30%; +} +/* .navbar { width: 440px; } @@ -11,11 +42,21 @@ body { width: 400px !important; margin-left: 20px; } +*/ .player { - .increment, .remove { + .increment, .remove, .icescream { &:hover { cursor: pointer; } } } + +.logs { + h3 {display: inline; margin: 5px;} +} + +textarea { width: 95%;} + + + diff --git a/client/lib/moment.js b/client/lib/moment.js new file mode 100644 index 0000000..95520c0 --- /dev/null +++ b/client/lib/moment.js @@ -0,0 +1,1106 @@ +// moment.js +// version : 1.7.0 +// author : Tim Wood +// license : MIT +// momentjs.com + +(function (Date, undefined) { + + /************************************ + Constants + ************************************/ + + var moment, + VERSION = "1.7.0", + round = Math.round, i, + // internal storage for language config files + languages = {}, + currentLanguage = 'en', + + // check for nodeJS + hasModule = (typeof module !== 'undefined' && module.exports), + + // Parameters to check for on the lang config. This list of properties + // will be inherited from English if not provided in a language + // definition. monthsParse is also a lang config property, but it + // cannot be inherited and as such cannot be enumerated here. + langConfigProperties = 'months|monthsShort|weekdays|weekdaysShort|weekdaysMin|longDateFormat|calendar|relativeTime|ordinal|meridiem'.split('|'), + + // ASP.NET json date format regex + aspNetJsonRegex = /^\/?Date\((\-?\d+)/i, + + // format tokens + formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|YYYY|YY|a|A|hh?|HH?|mm?|ss?|SS?S?|zz?|ZZ?)/g, + localFormattingTokens = /(LT|LL?L?L?)/g, + formattingRemoveEscapes = /(^\[)|(\\)|\]$/g, + + // parsing tokens + parseMultipleFormatChunker = /([0-9a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)/gi, + + // parsing token regexes + parseTokenOneOrTwoDigits = /\d\d?/, // 0 - 99 + parseTokenOneToThreeDigits = /\d{1,3}/, // 0 - 999 + parseTokenThreeDigits = /\d{3}/, // 000 - 999 + parseTokenFourDigits = /\d{1,4}/, // 0 - 9999 + parseTokenWord = /[0-9a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+/i, // any word characters or numbers + parseTokenTimezone = /Z|[\+\-]\d\d:?\d\d/i, // +00:00 -00:00 +0000 -0000 or Z + parseTokenT = /T/i, // T (ISO seperator) + + // preliminary iso regex + // 0000-00-00 + T + 00 or 00:00 or 00:00:00 or 00:00:00.000 + +00:00 or +0000 + isoRegex = /^\s*\d{4}-\d\d-\d\d(T(\d\d(:\d\d(:\d\d(\.\d\d?\d?)?)?)?)?([\+\-]\d\d:?\d\d)?)?/, + isoFormat = 'YYYY-MM-DDTHH:mm:ssZ', + + // iso time formats and regexes + isoTimes = [ + ['HH:mm:ss.S', /T\d\d:\d\d:\d\d\.\d{1,3}/], + ['HH:mm:ss', /T\d\d:\d\d:\d\d/], + ['HH:mm', /T\d\d:\d\d/], + ['HH', /T\d\d/] + ], + + // timezone chunker "+10:00" > ["10", "00"] or "-1530" > ["-15", "30"] + parseTimezoneChunker = /([\+\-]|\d\d)/gi, + + // getter and setter names + proxyGettersAndSetters = 'Month|Date|Hours|Minutes|Seconds|Milliseconds'.split('|'), + unitMillisecondFactors = { + 'Milliseconds' : 1, + 'Seconds' : 1e3, + 'Minutes' : 6e4, + 'Hours' : 36e5, + 'Days' : 864e5, + 'Months' : 2592e6, + 'Years' : 31536e6 + }, + + // format function strings + formatFunctions = {}, + + /* + * moment.fn.format uses new Function() to create an inlined formatting function. + * Results are a 3x speed boost + * http://jsperf.com/momentjs-cached-format-functions + * + * These strings are appended into a function using replaceFormatTokens and makeFormatFunction + */ + formatFunctionStrings = { + // a = placeholder + // b = placeholder + // t = the current moment being formatted + // v = getValueAtKey function + // o = language.ordinal function + // p = leftZeroFill function + // m = language.meridiem value or function + M : '(a=t.month()+1)', + MMM : 'v("monthsShort",t.month())', + MMMM : 'v("months",t.month())', + D : '(a=t.date())', + DDD : '(a=new Date(t.year(),t.month(),t.date()),b=new Date(t.year(),0,1),a=~~(((a-b)/864e5)+1.5))', + d : '(a=t.day())', + dd : 'v("weekdaysMin",t.day())', + ddd : 'v("weekdaysShort",t.day())', + dddd : 'v("weekdays",t.day())', + w : '(a=new Date(t.year(),t.month(),t.date()-t.day()+5),b=new Date(a.getFullYear(),0,4),a=~~((a-b)/864e5/7+1.5))', + YY : 'p(t.year()%100,2)', + YYYY : 'p(t.year(),4)', + a : 'm(t.hours(),t.minutes(),!0)', + A : 'm(t.hours(),t.minutes(),!1)', + H : 't.hours()', + h : 't.hours()%12||12', + m : 't.minutes()', + s : 't.seconds()', + S : '~~(t.milliseconds()/100)', + SS : 'p(~~(t.milliseconds()/10),2)', + SSS : 'p(t.milliseconds(),3)', + Z : '((a=-t.zone())<0?((a=-a),"-"):"+")+p(~~(a/60),2)+":"+p(~~a%60,2)', + ZZ : '((a=-t.zone())<0?((a=-a),"-"):"+")+p(~~(10*a/6),4)' + }, + + ordinalizeTokens = 'DDD w M D d'.split(' '), + paddedTokens = 'M D H h m s w'.split(' '); + + while (ordinalizeTokens.length) { + i = ordinalizeTokens.pop(); + formatFunctionStrings[i + 'o'] = formatFunctionStrings[i] + '+o(a)'; + } + while (paddedTokens.length) { + i = paddedTokens.pop(); + formatFunctionStrings[i + i] = 'p(' + formatFunctionStrings[i] + ',2)'; + } + formatFunctionStrings.DDDD = 'p(' + formatFunctionStrings.DDD + ',3)'; + + + /************************************ + Constructors + ************************************/ + + + // Moment prototype object + function Moment(date, isUTC, lang) { + this._d = date; + this._isUTC = !!isUTC; + this._a = date._a || null; + date._a = null; + this._lang = lang || false; + } + + // Duration Constructor + function Duration(duration) { + var data = this._data = {}, + years = duration.years || duration.y || 0, + months = duration.months || duration.M || 0, + weeks = duration.weeks || duration.w || 0, + days = duration.days || duration.d || 0, + hours = duration.hours || duration.h || 0, + minutes = duration.minutes || duration.m || 0, + seconds = duration.seconds || duration.s || 0, + milliseconds = duration.milliseconds || duration.ms || 0; + + // representation for dateAddRemove + this._milliseconds = milliseconds + + seconds * 1e3 + // 1000 + minutes * 6e4 + // 1000 * 60 + hours * 36e5; // 1000 * 60 * 60 + // Because of dateAddRemove treats 24 hours as different from a + // day when working around DST, we need to store them separately + this._days = days + + weeks * 7; + // It is impossible translate months into days without knowing + // which months you are are talking about, so we have to store + // it separately. + this._months = months + + years * 12; + + // The following code bubbles up values, see the tests for + // examples of what that means. + data.milliseconds = milliseconds % 1000; + seconds += absRound(milliseconds / 1000); + + data.seconds = seconds % 60; + minutes += absRound(seconds / 60); + + data.minutes = minutes % 60; + hours += absRound(minutes / 60); + + data.hours = hours % 24; + days += absRound(hours / 24); + + days += weeks * 7; + data.days = days % 30; + + months += absRound(days / 30); + + data.months = months % 12; + years += absRound(months / 12); + + data.years = years; + + this._lang = false; + } + + + /************************************ + Helpers + ************************************/ + + + function absRound(number) { + if (number < 0) { + return Math.ceil(number); + } else { + return Math.floor(number); + } + } + + // left zero fill a number + // see http://jsperf.com/left-zero-filling for performance comparison + function leftZeroFill(number, targetLength) { + var output = number + ''; + while (output.length < targetLength) { + output = '0' + output; + } + return output; + } + + // helper function for _.addTime and _.subtractTime + function addOrSubtractDurationFromMoment(mom, duration, isAdding) { + var ms = duration._milliseconds, + d = duration._days, + M = duration._months, + currentDate; + + if (ms) { + mom._d.setTime(+mom + ms * isAdding); + } + if (d) { + mom.date(mom.date() + d * isAdding); + } + if (M) { + currentDate = mom.date(); + mom.date(1) + .month(mom.month() + M * isAdding) + .date(Math.min(currentDate, mom.daysInMonth())); + } + } + + // check if is an array + function isArray(input) { + return Object.prototype.toString.call(input) === '[object Array]'; + } + + // compare two arrays, return the number of differences + function compareArrays(array1, array2) { + var len = Math.min(array1.length, array2.length), + lengthDiff = Math.abs(array1.length - array2.length), + diffs = 0, + i; + for (i = 0; i < len; i++) { + if (~~array1[i] !== ~~array2[i]) { + diffs++; + } + } + return diffs + lengthDiff; + } + + // convert an array to a date. + // the array should mirror the parameters below + // note: all values past the year are optional and will default to the lowest possible value. + // [year, month, day , hour, minute, second, millisecond] + function dateFromArray(input, asUTC) { + var i, date; + for (i = 1; i < 7; i++) { + input[i] = (input[i] == null) ? (i === 2 ? 1 : 0) : input[i]; + } + // we store whether we used utc or not in the input array + input[7] = asUTC; + date = new Date(0); + if (asUTC) { + date.setUTCFullYear(input[0], input[1], input[2]); + date.setUTCHours(input[3], input[4], input[5], input[6]); + } else { + date.setFullYear(input[0], input[1], input[2]); + date.setHours(input[3], input[4], input[5], input[6]); + } + date._a = input; + return date; + } + + // Loads a language definition into the `languages` cache. The function + // takes a key and optionally values. If not in the browser and no values + // are provided, it will load the language file module. As a convenience, + // this function also returns the language values. + function loadLang(key, values) { + var i, m, + parse = []; + + if (!values && hasModule) { + values = require('./lang/' + key); + } + + for (i = 0; i < langConfigProperties.length; i++) { + // If a language definition does not provide a value, inherit + // from English + values[langConfigProperties[i]] = values[langConfigProperties[i]] || + languages.en[langConfigProperties[i]]; + } + + for (i = 0; i < 12; i++) { + m = moment([2000, i]); + parse[i] = new RegExp('^' + (values.months[i] || values.months(m, '')) + + '|^' + (values.monthsShort[i] || values.monthsShort(m, '')).replace('.', ''), 'i'); + } + values.monthsParse = values.monthsParse || parse; + + languages[key] = values; + + return values; + } + + // Determines which language definition to use and returns it. + // + // With no parameters, it will return the global language. If you + // pass in a language key, such as 'en', it will return the + // definition for 'en', so long as 'en' has already been loaded using + // moment.lang. If you pass in a moment or duration instance, it + // will decide the language based on that, or default to the global + // language. + function getLangDefinition(m) { + var langKey = (typeof m === 'string') && m || + m && m._lang || + null; + + return langKey ? (languages[langKey] || loadLang(langKey)) : moment; + } + + + /************************************ + Formatting + ************************************/ + + + // helper for building inline formatting functions + function replaceFormatTokens(token) { + return formatFunctionStrings[token] ? + ("'+(" + formatFunctionStrings[token] + ")+'") : + token.replace(formattingRemoveEscapes, "").replace(/\\?'/g, "\\'"); + } + + // helper for recursing long date formatting tokens + function replaceLongDateFormatTokens(input) { + return getLangDefinition().longDateFormat[input] || input; + } + + function makeFormatFunction(format) { + var output = "var a,b;return '" + + format.replace(formattingTokens, replaceFormatTokens) + "';", + Fn = Function; // get around jshint + // t = the current moment being formatted + // v = getValueAtKey function + // o = language.ordinal function + // p = leftZeroFill function + // m = language.meridiem value or function + return new Fn('t', 'v', 'o', 'p', 'm', output); + } + + function makeOrGetFormatFunction(format) { + if (!formatFunctions[format]) { + formatFunctions[format] = makeFormatFunction(format); + } + return formatFunctions[format]; + } + + // format date using native date object + function formatMoment(m, format) { + var lang = getLangDefinition(m); + + function getValueFromArray(key, index) { + return lang[key].call ? lang[key](m, format) : lang[key][index]; + } + + while (localFormattingTokens.test(format)) { + format = format.replace(localFormattingTokens, replaceLongDateFormatTokens); + } + + if (!formatFunctions[format]) { + formatFunctions[format] = makeFormatFunction(format); + } + + return formatFunctions[format](m, getValueFromArray, lang.ordinal, leftZeroFill, lang.meridiem); + } + + + /************************************ + Parsing + ************************************/ + + + // get the regex to find the next token + function getParseRegexForToken(token) { + switch (token) { + case 'DDDD': + return parseTokenThreeDigits; + case 'YYYY': + return parseTokenFourDigits; + case 'S': + case 'SS': + case 'SSS': + case 'DDD': + return parseTokenOneToThreeDigits; + case 'MMM': + case 'MMMM': + case 'dd': + case 'ddd': + case 'dddd': + case 'a': + case 'A': + return parseTokenWord; + case 'Z': + case 'ZZ': + return parseTokenTimezone; + case 'T': + return parseTokenT; + case 'MM': + case 'DD': + case 'YY': + case 'HH': + case 'hh': + case 'mm': + case 'ss': + case 'M': + case 'D': + case 'd': + case 'H': + case 'h': + case 'm': + case 's': + return parseTokenOneOrTwoDigits; + default : + return new RegExp(token.replace('\\', '')); + } + } + + // function to convert string input to date + function addTimeToArrayFromToken(token, input, datePartArray, config) { + var a; + //console.log('addTime', format, input); + switch (token) { + // MONTH + case 'M' : // fall through to MM + case 'MM' : + datePartArray[1] = (input == null) ? 0 : ~~input - 1; + break; + case 'MMM' : // fall through to MMMM + case 'MMMM' : + for (a = 0; a < 12; a++) { + if (getLangDefinition().monthsParse[a].test(input)) { + datePartArray[1] = a; + break; + } + } + break; + // DAY OF MONTH + case 'D' : // fall through to DDDD + case 'DD' : // fall through to DDDD + case 'DDD' : // fall through to DDDD + case 'DDDD' : + if (input != null) { + datePartArray[2] = ~~input; + } + break; + // YEAR + case 'YY' : + input = ~~input; + datePartArray[0] = input + (input > 70 ? 1900 : 2000); + break; + case 'YYYY' : + datePartArray[0] = ~~Math.abs(input); + break; + // AM / PM + case 'a' : // fall through to A + case 'A' : + config.isPm = ((input + '').toLowerCase() === 'pm'); + break; + // 24 HOUR + case 'H' : // fall through to hh + case 'HH' : // fall through to hh + case 'h' : // fall through to hh + case 'hh' : + datePartArray[3] = ~~input; + break; + // MINUTE + case 'm' : // fall through to mm + case 'mm' : + datePartArray[4] = ~~input; + break; + // SECOND + case 's' : // fall through to ss + case 'ss' : + datePartArray[5] = ~~input; + break; + // MILLISECOND + case 'S' : + case 'SS' : + case 'SSS' : + datePartArray[6] = ~~ (('0.' + input) * 1000); + break; + // TIMEZONE + case 'Z' : // fall through to ZZ + case 'ZZ' : + config.isUTC = true; + a = (input + '').match(parseTimezoneChunker); + if (a && a[1]) { + config.tzh = ~~a[1]; + } + if (a && a[2]) { + config.tzm = ~~a[2]; + } + // reverse offsets + if (a && a[0] === '+') { + config.tzh = -config.tzh; + config.tzm = -config.tzm; + } + break; + } + } + + // date from string and format string + function makeDateFromStringAndFormat(string, format) { + var datePartArray = [0, 0, 1, 0, 0, 0, 0], + config = { + tzh : 0, // timezone hour offset + tzm : 0 // timezone minute offset + }, + tokens = format.match(formattingTokens), + i, parsedInput; + + for (i = 0; i < tokens.length; i++) { + parsedInput = (getParseRegexForToken(tokens[i]).exec(string) || [])[0]; + string = string.replace(getParseRegexForToken(tokens[i]), ''); + addTimeToArrayFromToken(tokens[i], parsedInput, datePartArray, config); + } + // handle am pm + if (config.isPm && datePartArray[3] < 12) { + datePartArray[3] += 12; + } + // if is 12 am, change hours to 0 + if (config.isPm === false && datePartArray[3] === 12) { + datePartArray[3] = 0; + } + // handle timezone + datePartArray[3] += config.tzh; + datePartArray[4] += config.tzm; + // return + return dateFromArray(datePartArray, config.isUTC); + } + + // date from string and array of format strings + function makeDateFromStringAndArray(string, formats) { + var output, + inputParts = string.match(parseMultipleFormatChunker) || [], + formattedInputParts, + scoreToBeat = 99, + i, + currentDate, + currentScore; + for (i = 0; i < formats.length; i++) { + currentDate = makeDateFromStringAndFormat(string, formats[i]); + formattedInputParts = formatMoment(new Moment(currentDate), formats[i]).match(parseMultipleFormatChunker) || []; + currentScore = compareArrays(inputParts, formattedInputParts); + if (currentScore < scoreToBeat) { + scoreToBeat = currentScore; + output = currentDate; + } + } + return output; + } + + // date from iso format + function makeDateFromString(string) { + var format = 'YYYY-MM-DDT', + i; + if (isoRegex.exec(string)) { + for (i = 0; i < 4; i++) { + if (isoTimes[i][1].exec(string)) { + format += isoTimes[i][0]; + break; + } + } + return parseTokenTimezone.exec(string) ? + makeDateFromStringAndFormat(string, format + ' Z') : + makeDateFromStringAndFormat(string, format); + } + return new Date(string); + } + + + /************************************ + Relative Time + ************************************/ + + + // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize + function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) { + var rt = lang.relativeTime[string]; + return (typeof rt === 'function') ? + rt(number || 1, !!withoutSuffix, string, isFuture) : + rt.replace(/%d/i, number || 1); + } + + function relativeTime(milliseconds, withoutSuffix, lang) { + var seconds = round(Math.abs(milliseconds) / 1000), + minutes = round(seconds / 60), + hours = round(minutes / 60), + days = round(hours / 24), + years = round(days / 365), + args = seconds < 45 && ['s', seconds] || + minutes === 1 && ['m'] || + minutes < 45 && ['mm', minutes] || + hours === 1 && ['h'] || + hours < 22 && ['hh', hours] || + days === 1 && ['d'] || + days <= 25 && ['dd', days] || + days <= 45 && ['M'] || + days < 345 && ['MM', round(days / 30)] || + years === 1 && ['y'] || ['yy', years]; + args[2] = withoutSuffix; + args[3] = milliseconds > 0; + args[4] = lang; + return substituteTimeAgo.apply({}, args); + } + + + /************************************ + Top Level Functions + ************************************/ + + + moment = function (input, format) { + if (input === null || input === '') { + return null; + } + var date, + matched; + // parse Moment object + if (moment.isMoment(input)) { + return new Moment(new Date(+input._d), input._isUTC, input._lang); + // parse string and format + } else if (format) { + if (isArray(format)) { + date = makeDateFromStringAndArray(input, format); + } else { + date = makeDateFromStringAndFormat(input, format); + } + // evaluate it as a JSON-encoded date + } else { + matched = aspNetJsonRegex.exec(input); + date = input === undefined ? new Date() : + matched ? new Date(+matched[1]) : + input instanceof Date ? input : + isArray(input) ? dateFromArray(input) : + typeof input === 'string' ? makeDateFromString(input) : + new Date(input); + } + + return new Moment(date); + }; + + // creating with utc + moment.utc = function (input, format) { + if (isArray(input)) { + return new Moment(dateFromArray(input, true), true); + } + // if we don't have a timezone, we need to add one to trigger parsing into utc + if (typeof input === 'string' && !parseTokenTimezone.exec(input)) { + input += ' +0000'; + if (format) { + format += ' Z'; + } + } + return moment(input, format).utc(); + }; + + // creating with unix timestamp (in seconds) + moment.unix = function (input) { + return moment(input * 1000); + }; + + // duration + moment.duration = function (input, key) { + var isDuration = moment.isDuration(input), + isNumber = (typeof input === 'number'), + duration = (isDuration ? input._data : (isNumber ? {} : input)), + ret; + + if (isNumber) { + if (key) { + duration[key] = input; + } else { + duration.milliseconds = input; + } + } + + ret = new Duration(duration); + + if (isDuration) { + ret._lang = input._lang; + } + + return ret; + }; + + // humanizeDuration + // This method is deprecated in favor of the new Duration object. Please + // see the moment.duration method. + moment.humanizeDuration = function (num, type, withSuffix) { + return moment.duration(num, type === true ? null : type).humanize(type === true ? true : withSuffix); + }; + + // version number + moment.version = VERSION; + + // default format + moment.defaultFormat = isoFormat; + + // This function will load languages and then set the global language. If + // no arguments are passed in, it will simply return the current global + // language key. + moment.lang = function (key, values) { + var i; + + if (!key) { + return currentLanguage; + } + if (values || !languages[key]) { + loadLang(key, values); + } + if (languages[key]) { + // deprecated, to get the language definition variables, use the + // moment.fn.lang method or the getLangDefinition function. + for (i = 0; i < langConfigProperties.length; i++) { + moment[langConfigProperties[i]] = languages[key][langConfigProperties[i]]; + } + moment.monthsParse = languages[key].monthsParse; + currentLanguage = key; + } + }; + + // returns language data + moment.langData = getLangDefinition; + + // compare moment object + moment.isMoment = function (obj) { + return obj instanceof Moment; + }; + + // for typechecking Duration objects + moment.isDuration = function (obj) { + return obj instanceof Duration; + }; + + // Set default language, other languages will inherit from English. + moment.lang('en', { + months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), + monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), + weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), + weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), + weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), + longDateFormat : { + LT : "h:mm A", + L : "MM/DD/YYYY", + LL : "MMMM D YYYY", + LLL : "MMMM D YYYY LT", + LLLL : "dddd, MMMM D YYYY LT" + }, + meridiem : function (hours, minutes, isLower) { + if (hours > 11) { + return isLower ? 'pm' : 'PM'; + } else { + return isLower ? 'am' : 'AM'; + } + }, + calendar : { + sameDay : '[Today at] LT', + nextDay : '[Tomorrow at] LT', + nextWeek : 'dddd [at] LT', + lastDay : '[Yesterday at] LT', + lastWeek : '[last] dddd [at] LT', + sameElse : 'L' + }, + relativeTime : { + future : "in %s", + past : "%s ago", + s : "a few seconds", + m : "a minute", + mm : "%d minutes", + h : "an hour", + hh : "%d hours", + d : "a day", + dd : "%d days", + M : "a month", + MM : "%d months", + y : "a year", + yy : "%d years" + }, + ordinal : function (number) { + var b = number % 10; + return (~~ (number % 100 / 10) === 1) ? 'th' : + (b === 1) ? 'st' : + (b === 2) ? 'nd' : + (b === 3) ? 'rd' : 'th'; + } + }); + + + /************************************ + Moment Prototype + ************************************/ + + + moment.fn = Moment.prototype = { + + clone : function () { + return moment(this); + }, + + valueOf : function () { + return +this._d; + }, + + unix : function () { + return Math.floor(+this._d / 1000); + }, + + toString : function () { + return this._d.toString(); + }, + + toDate : function () { + return this._d; + }, + + toArray : function () { + var m = this; + return [ + m.year(), + m.month(), + m.date(), + m.hours(), + m.minutes(), + m.seconds(), + m.milliseconds(), + !!this._isUTC + ]; + }, + + isValid : function () { + if (this._a) { + return !compareArrays(this._a, (this._a[7] ? moment.utc(this) : this).toArray()); + } + return !isNaN(this._d.getTime()); + }, + + utc : function () { + this._isUTC = true; + return this; + }, + + local : function () { + this._isUTC = false; + return this; + }, + + format : function (inputString) { + return formatMoment(this, inputString ? inputString : moment.defaultFormat); + }, + + add : function (input, val) { + var dur = val ? moment.duration(+val, input) : moment.duration(input); + addOrSubtractDurationFromMoment(this, dur, 1); + return this; + }, + + subtract : function (input, val) { + var dur = val ? moment.duration(+val, input) : moment.duration(input); + addOrSubtractDurationFromMoment(this, dur, -1); + return this; + }, + + diff : function (input, val, asFloat) { + var inputMoment = this._isUTC ? moment(input).utc() : moment(input).local(), + zoneDiff = (this.zone() - inputMoment.zone()) * 6e4, + diff = this._d - inputMoment._d - zoneDiff, + year = this.year() - inputMoment.year(), + month = this.month() - inputMoment.month(), + date = this.date() - inputMoment.date(), + output; + if (val === 'months') { + output = year * 12 + month + date / 30; + } else if (val === 'years') { + output = year + (month + date / 30) / 12; + } else { + output = val === 'seconds' ? diff / 1e3 : // 1000 + val === 'minutes' ? diff / 6e4 : // 1000 * 60 + val === 'hours' ? diff / 36e5 : // 1000 * 60 * 60 + val === 'days' ? diff / 864e5 : // 1000 * 60 * 60 * 24 + val === 'weeks' ? diff / 6048e5 : // 1000 * 60 * 60 * 24 * 7 + diff; + } + return asFloat ? output : round(output); + }, + + from : function (time, withoutSuffix) { + return moment.duration(this.diff(time)).lang(this._lang).humanize(!withoutSuffix); + }, + + fromNow : function (withoutSuffix) { + return this.from(moment(), withoutSuffix); + }, + + calendar : function () { + var diff = this.diff(moment().sod(), 'days', true), + calendar = this.lang().calendar, + allElse = calendar.sameElse, + format = diff < -6 ? allElse : + diff < -1 ? calendar.lastWeek : + diff < 0 ? calendar.lastDay : + diff < 1 ? calendar.sameDay : + diff < 2 ? calendar.nextDay : + diff < 7 ? calendar.nextWeek : allElse; + return this.format(typeof format === 'function' ? format.apply(this) : format); + }, + + isLeapYear : function () { + var year = this.year(); + return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + }, + + isDST : function () { + return (this.zone() < moment([this.year()]).zone() || + this.zone() < moment([this.year(), 5]).zone()); + }, + + day : function (input) { + var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay(); + return input == null ? day : + this.add({ d : input - day }); + }, + + startOf: function (val) { + // the following switch intentionally omits break keywords + // to utilize falling through the cases. + switch (val.replace(/s$/, '')) { + case 'year': + this.month(0); + /* falls through */ + case 'month': + this.date(1); + /* falls through */ + case 'day': + this.hours(0); + /* falls through */ + case 'hour': + this.minutes(0); + /* falls through */ + case 'minute': + this.seconds(0); + /* falls through */ + case 'second': + this.milliseconds(0); + /* falls through */ + } + return this; + }, + + endOf: function (val) { + return this.startOf(val).add(val.replace(/s?$/, 's'), 1).subtract('ms', 1); + }, + + sod: function () { + return this.clone().startOf('day'); + }, + + eod: function () { + // end of day = start of day plus 1 day, minus 1 millisecond + return this.clone().endOf('day'); + }, + + zone : function () { + return this._isUTC ? 0 : this._d.getTimezoneOffset(); + }, + + daysInMonth : function () { + return moment.utc([this.year(), this.month() + 1, 0]).date(); + }, + + // If passed a language key, it will set the language for this + // instance. Otherwise, it will return the language configuration + // variables for this instance. + lang : function (lang) { + if (lang === undefined) { + return getLangDefinition(this); + } else { + this._lang = lang; + return this; + } + } + }; + + // helper for adding shortcuts + function makeGetterAndSetter(name, key) { + moment.fn[name] = function (input) { + var utc = this._isUTC ? 'UTC' : ''; + if (input != null) { + this._d['set' + utc + key](input); + return this; + } else { + return this._d['get' + utc + key](); + } + }; + } + + // loop through and add shortcuts (Month, Date, Hours, Minutes, Seconds, Milliseconds) + for (i = 0; i < proxyGettersAndSetters.length; i ++) { + makeGetterAndSetter(proxyGettersAndSetters[i].toLowerCase(), proxyGettersAndSetters[i]); + } + + // add shortcut for year (uses different syntax than the getter/setter 'year' == 'FullYear') + makeGetterAndSetter('year', 'FullYear'); + + + /************************************ + Duration Prototype + ************************************/ + + + moment.duration.fn = Duration.prototype = { + weeks : function () { + return absRound(this.days() / 7); + }, + + valueOf : function () { + return this._milliseconds + + this._days * 864e5 + + this._months * 2592e6; + }, + + humanize : function (withSuffix) { + var difference = +this, + rel = this.lang().relativeTime, + output = relativeTime(difference, !withSuffix, this.lang()); + + if (withSuffix) { + output = (difference <= 0 ? rel.past : rel.future).replace(/%s/i, output); + } + + return output; + }, + + lang : moment.fn.lang + }; + + function makeDurationGetter(name) { + moment.duration.fn[name] = function () { + return this._data[name]; + }; + } + + function makeDurationAsGetter(name, factor) { + moment.duration.fn['as' + name] = function () { + return +this / factor; + }; + } + + for (i in unitMillisecondFactors) { + if (unitMillisecondFactors.hasOwnProperty(i)) { + makeDurationAsGetter(i, unitMillisecondFactors[i]); + makeDurationGetter(i.toLowerCase()); + } + } + + makeDurationAsGetter('Weeks', 6048e5); + + + /************************************ + Exposing Moment + ************************************/ + + + // CommonJS module is defined + if (hasModule) { + module.exports = moment; + } + /*global ender:false */ + if (typeof ender === 'undefined') { + // here, `this` means `window` in the browser, or `global` on the server + // add `moment` as a global object via a string identifier, + // for Closure Compiler "advanced" mode + this['moment'] = moment; + } + /*global define:false */ + if (typeof define === "function" && define.amd) { + define("moment", [], function () { + return moment; + }); + } +}).call(this, Date); diff --git a/client/lib/moment.zh.js b/client/lib/moment.zh.js new file mode 100644 index 0000000..146e82a --- /dev/null +++ b/client/lib/moment.zh.js @@ -0,0 +1,67 @@ +// moment.js language configuration +// language : chinese +// author : suupic : https://github.com/suupic +(function () { + var lang = { + months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"), + monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"), + weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"), + weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"), + weekdaysMin : "日_一_二_三_四_五_六".split("_"), + longDateFormat : { + LT : "Ah点mm", + L : "YYYY年MMMD日", + LL : "YYYY年MMMD日", + LLL : "YYYY年MMMD日LT", + LLLL : "YYYY年MMMD日ddddLT" + }, + meridiem : function (hour, minute, isLower) { + if (hour < 9) { + return "早上"; + } else if (hour < 11 && minute < 30) { + return "上午"; + } else if (hour < 13 && minute < 30) { + return "中午"; + } else if (hour < 18) { + return "下午"; + } else { + return "晚上"; + } + }, + calendar : { + sameDay : '[今天]LT', + nextDay : '[明天]LT', + nextWeek : '[下]ddddLT', + lastDay : '[昨天]LT', + lastWeek : '[上]ddddLT', + sameElse : 'L' + }, + relativeTime : { + future : "%s内", + past : "%s前", + s : "几秒", + m : "1分钟", + mm : "%d分钟", + h : "1小时", + hh : "%d小时", + d : "1天", + dd : "%d天", + M : "1个月", + MM : "%d个月", + y : "1年", + yy : "%d年" + }, + ordinal : function (number) { + return ''; + } + }; + + // Node + if (typeof module !== 'undefined' && module.exports) { + module.exports = lang; + } + // Browser + if (typeof window !== 'undefined' && this.moment && this.moment.lang) { + this.moment.lang('zh-cn', lang); + } +}()); \ No newline at end of file diff --git a/client/lib/spin.js b/client/lib/spin.js new file mode 100644 index 0000000..f12d9e0 --- /dev/null +++ b/client/lib/spin.js @@ -0,0 +1,306 @@ +//fgnass.github.com/spin.js#v1.2.5 +(function(window, document, undefined) { + + /** + * Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de] + * Licensed under the MIT license + */ + + var prefixes = ['webkit', 'Moz', 'ms', 'O']; /* Vendor prefixes */ + var animations = {}; /* Animation rules keyed by their name */ + var useCssAnimations; + + /** + * Utility function to create elements. If no tag name is given, + * a DIV is created. Optionally properties can be passed. + */ + function createEl(tag, prop) { + var el = document.createElement(tag || 'div'); + var n; + + for(n in prop) { + el[n] = prop[n]; + } + return el; + } + + /** + * Appends children and returns the parent. + */ + function ins(parent /* child1, child2, ...*/) { + for (var i=1, n=arguments.length; i> 1) : o.left+mid) + 'px', + top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : o.top+mid) + 'px' + }); + } + + el.setAttribute('aria-role', 'progressbar'); + self.lines(el, self.opts); + + if (!useCssAnimations) { + // No CSS animation support, use setTimeout() instead + var i = 0; + var fps = o.fps; + var f = fps/o.speed; + var ostep = (1-o.opacity)/(f*o.trail / 100); + var astep = f/o.lines; + + !function anim() { + i++; + for (var s=o.lines; s; s--) { + var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity); + self.opacity(el, o.lines-s, alpha, o); + } + self.timeout = self.el && setTimeout(anim, ~~(1000/fps)); + }(); + } + return self; + }, + stop: function() { + var el = this.el; + if (el) { + clearTimeout(this.timeout); + if (el.parentNode) el.parentNode.removeChild(el); + this.el = undefined; + } + return this; + }, + lines: function(el, o) { + var i = 0; + var seg; + + function fill(color, shadow) { + return css(createEl(), { + position: 'absolute', + width: (o.length+o.width) + 'px', + height: o.width + 'px', + background: color, + boxShadow: shadow, + transformOrigin: 'left', + transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)', + borderRadius: (o.width>>1) + 'px' + }); + } + for (; i < o.lines; i++) { + seg = css(createEl(), { + position: 'absolute', + top: 1+~(o.width/2) + 'px', + transform: o.hwaccel ? 'translate3d(0,0,0)' : '', + opacity: o.opacity, + animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite' + }); + if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'})); + ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)'))); + } + return el; + }, + opacity: function(el, i, val) { + if (i < el.childNodes.length) el.childNodes[i].style.opacity = val; + } + }); + + ///////////////////////////////////////////////////////////////////////// + // VML rendering for IE + ///////////////////////////////////////////////////////////////////////// + + /** + * Check and init VML support + */ + !function() { + + function vml(tag, attr) { + return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr); + } + + var s = css(createEl('group'), {behavior: 'url(#default#VML)'}); + + if (!vendor(s, 'transform') && s.adj) { + + // VML support detected. Insert CSS rule ... + sheet.addRule('.spin-vml', 'behavior:url(#default#VML)'); + + Spinner.prototype.lines = function(el, o) { + var r = o.length+o.width; + var s = 2*r; + + function grp() { + return css(vml('group', {coordsize: s +' '+s, coordorigin: -r +' '+-r}), {width: s, height: s}); + } + + var margin = -(o.width+o.length)*2+'px'; + var g = css(grp(), {position: 'absolute', top: margin, left: margin}); + + var i; + + function seg(i, dx, filter) { + ins(g, + ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), + ins(css(vml('roundrect', {arcsize: 1}), { + width: r, + height: o.width, + left: o.radius, + top: -o.width>>1, + filter: filter + }), + vml('fill', {color: o.color, opacity: o.opacity}), + vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change + ) + ) + ); + } + + if (o.shadow) { + for (i = 1; i <= o.lines; i++) { + seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)'); + } + } + for (i = 1; i <= o.lines; i++) seg(i); + return ins(el, g); + }; + Spinner.prototype.opacity = function(el, i, val, o) { + var c = el.firstChild; + o = o.shadow && o.lines || 0; + if (c && i+o < c.childNodes.length) { + c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild; + if (c) c.opacity = val; + } + }; + } + else { + useCssAnimations = vendor(s, 'animation'); + } + }(); + + window.Spinner = Spinner; + +})(window, document); \ No newline at end of file diff --git a/leaderboard.coffee b/leaderboard.coffee index 7fa6a7f..01f1998 100644 --- a/leaderboard.coffee +++ b/leaderboard.coffee @@ -1,47 +1,183 @@ Players = new Meteor.Collection 'players' +Logs = new Meteor.Collection 'logs' +Comments = new Meteor.Collection 'comments' +spinner = null reset_data = -> # Executes on both client and server. Players.remove {} - names = [ 'Ada Lovelace', - 'Grace Hopper', - 'Marie Curie', - 'Carl Friedrich Gauss', - 'Nikola Tesla', - 'Claude Shannon', - 'Issac Newton', - ] - for name in names + Logs.remove {} + Comments.remove {} + Session.set 'username', '' + + names = [ + {name: 'Tyr', score: 2, icescream: 1, group: '开发'}, + {name: 'Jason', score: 10, icescream: 0, group: '开发'}, + {name: 'Xiao', score: 9, icescream: 0, group: '开发'}, + {name: 'Chiyuan', score: 3, icescream: 1, group: '开发'}, + {name: 'Xintao', score: 2, icescream: 0, group: '开发'}, + {name: 'Hugh', score: 1, icescream: 0, group: '开发'}, + {name: 'Kent', score: 3, icescream: 0, group: '开发'}, + {name: 'Brian', score: 2, icescream: 0, group: '开发'}, + {name: 'Iduu', score: 1, icescream: 0, group: '开发'} + ] + logs = [ + {name: 'Xiao', text: '欧铁页面有问题', created: new Date('2012-8-24 19:00')}, + {name: 'Xiao', text: '欧铁页面影响到原APP页面', created: new Date('2012-8-24 19:30')}, + {name: 'Kent', text: '打赌投篮输给Tyr', created: new Date('2012-8-22')}, + {name: 'Iduu', text: '在灭零行动中主动申请一笔', created: new Date('2012-8-24')}, + {name: 'Jason', text: '佗佗很生气,后果很严重', created: new Date('2012-8-24')}, + {name: 'Tyr', text: '不小心把水洒在地毯上被Brian鄙视', created: new Date('2012-8-23')}, + {name: 'Hugh', text: '冰箱门没关严??', created: new Date('2012-8-20')}, + {name: 'Brian', text: '碰坏楼上的网络', created: new Date('2012-8-14')}, + {name: 'Chiyuan', text: '和Tyr打赌代码质量,结果输了', created: new Date('2012-8-23')}, + {name: 'Xintao', text: '欧铁APP出现一大堆小问题', created: new Date('2012-8-23')} + + ] + for item in names Players.insert - name: name - score: Math.floor(Math.random() * 10) * 5 + name: item.name + score: item.score + icescream: item.icescream + group: item.group + + for item in logs + Logs.insert + name: item.name + text: item.text + created: item.created + +init_group = -> + Players.update group: null, $set: group: '开发' if Meteor.is_client _.extend Template.navbar, events: - 'click .sort_by_name': -> Session.set 'sort_by_name', true - 'click .sort_by_score': -> Session.set 'sort_by_name', false + 'click .sort_by_name': -> Session.set 'sort', 0 + 'click .sort_by_score': -> Session.set 'sort', 1 + 'click .sort_by_icescream': -> Session.set 'sort', 2 'click .reset_data': -> reset_data() _.extend Template.leaderboard, + onReady: -> + Meteor.defer -> + #delay = (ms, func) -> Meteor.setTimeout func, ms + #delay 4000, -> + spinner.stop() + if not Session.get 'username' + name = prompt "请输入你的名字(用于发表评论)" + Session.set 'username', name || '匿名傻孩子' + players: -> - sort = if Session.get('sort_by_name') then name: 1 else score: -1 - Players.find {}, sort: sort + switch Session.get('sort') + when 0 then sort = name: 1 + when 1 then sort = score: -1 + when 2 then sort = icescream: -1 + + query = group: Session.get('selected_group') || '开发' + + Players.find query, sort: sort + + logs: -> + sort = created: -1 + name = Session.get 'selected_name' + query = {} + if name + query = name: name + + Logs.find query, sort: sort + + comments: -> + sort = created: -1 + Comments.find {}, sort: sort + + username: -> + Session.get 'username' + + group: -> + Session.get('selected_group') || '开发' events: 'click #add_button, keyup #player_name': (evt) -> return if evt.type is 'keyup' and evt.which isnt 13 # Key is not Enter. input = $('#player_name') + group = Session.get('selected_group') || '开发' if input.val() Players.insert name: input.val() - score: Math.floor(Math.random() * 10) * 5 + score: 0 + icescream: 0 + group: group + + Logs.insert + name: input.val() + text: '欢迎新童鞋进入正字地狱,我们的宗旨是:没有最差,只有更差;来了你就别想走' + created: new Date() + + input.val '' + + 'click #player-group .btn': (evt) -> + # TODO: meteor breaks bootstrap js from being toggled + Meteor.setTimeout (-> Session.set 'selected_group', $(evt.target).data('name')), 200 + + + + 'click .view-all-log': -> + Session.set 'selected_name', '' + + 'click #add_comment_button, keyup #comment': (evt) -> + return if evt.type is 'keyup' and evt.which isnt 13 # Key is not Enter. + input = $('#comment') + if input.val() + Comments.insert + name: Session.get 'username' + comment: input.val() + created: new Date() input.val '' + + _.extend Template.player, + last_log: -> + log = Logs.find {name: @name}, sort: {created: -1} + return log.fetch()[0]?.text + events: - 'click .increment': -> Players.update @_id, $inc: {score: 5} - 'click .remove': -> Players.remove @_id + 'click .increment': -> + $('#' + @name).modal() + 'click .decrement': -> + Logs.insert + name: @name + text: '管理员对上一笔正字很不满意,故而减之' + created: new Date() + Players.update @_id, $inc: {score:-1} + + 'click .log-increment': -> + text = $('#' + @name + ' textarea') + return if not text.val() + Logs.insert + name: @name + text: text.val() + created: new Date + text.val '' + Players.update @_id, $inc: {score: 1} + $('#' + @name).modal('hide') + + 'click .log-cancel': -> + $('#' + @name).modal('hide') + + 'click .buy-icescream': -> + if @score < 5 + return alert '别着急,你还没到兑现雪糕的时候' + Logs.insert + name: @name + text: '兑现了雪糕,心里酸酸的' + created: new Date + Players.update @_id, $inc: {score: -5, icescream: 1} + + 'click tr': -> + Session.set('selected_name', @name) + 'click': -> $('.tooltip').remove() # To prevent zombie tooltips. enable_tooltips: -> @@ -49,7 +185,22 @@ if Meteor.is_client _.defer -> $('[rel=tooltip]').tooltip() '' + _.extend Template.log, + formatted_time: -> + moment(@created).fromNow() + + _.extend Template.comment, + formatted_time: -> + moment(@created).fromNow() + + + # On server startup, create some players if the database is empty. if Meteor.is_server Meteor.startup -> reset_data() if Players.find().count() is 0 + init_group() if Players.find({group: null}).count isnt 0 + +if Meteor.is_client + Meteor.startup -> + spinner = new Spinner().spin(document.getElementsByTagName('body')[0]) \ No newline at end of file diff --git a/screenshot.png b/screenshot.png deleted file mode 100644 index 82facee..0000000 Binary files a/screenshot.png and /dev/null differ