diff --git a/bootstrap.css b/bootstrap.css
index 3de652f55ab702d9170bfd63e5ec515a797e3b97..62690e42fe7156c7c9a7cfb2169213d24350a845 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Tue Jan 24 20:30:11 PST 2012
+ * Date: Tue Jan 24 20:44:12 PST 2012
*/
article,
aside,
@@ -2953,13 +2953,21 @@ a.thumbnail:hover {
font-size: 60px;
font-weight: 100;
line-height: 30px;
- color: #ccc;
+ color: #fff;
text-align: center;
- background: #999999;
- background: rgba(0, 0, 0, 0.5);
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
+ background: #222222;
+ border: 3px solid #fff;
+ -webkit-border-radius: 23px;
+ -moz-border-radius: 23px;
+ border-radius: 23px;
+ filter: alpha(opacity=50);
+ -moz-opacity: 0.5;
+ opacity: 0.5;
+ -webkit-transition: all 0.2s linear;
+ -moz-transition: all 0.2s linear;
+ -ms-transition: all 0.2s linear;
+ -o-transition: all 0.2s linear;
+ transition: all 0.2s linear;
}
.carousel-control.right {
left: auto;
@@ -2968,8 +2976,9 @@ a.thumbnail:hover {
.carousel-control:hover {
color: #ffffff;
text-decoration: none;
- background: #333333;
- background: rgba(0, 0, 0, 0.75);
+ filter: alpha(opacity=90);
+ -moz-opacity: 0.9;
+ opacity: 0.9;
}
.carousel-caption {
position: absolute;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 9b3bdc74b85cfd89c85fdb758139042544b629a5..15d4f23613662ad0d4557cbcabc69a40bdf31551 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -530,8 +530,8 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
.carousel .next.left,.carousel .prev.right{left:0;}
.carousel .active.left{left:-100%;}
.carousel .active.right{left:100%;}
-.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#ccc;text-align:center;background:#999999;background:rgba(0, 0, 0, 0.5);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}.carousel-control.right{left:auto;right:15px;}
-.carousel-control:hover{color:#ffffff;text-decoration:none;background:#333333;background:rgba(0, 0, 0, 0.75);}
+.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}.carousel-control.right{left:auto;right:15px;}
+.carousel-control:hover{color:#ffffff;text-decoration:none;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;}
.carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 15px 5px;background:#333333;background:rgba(0, 0, 0, 0.75);}
.carousel-caption h4,.carousel-caption p{color:#ffffff;}
.pull-right{float:right;}
diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a5c7bb9009894d25e164a79a69b338202580631a
Binary files /dev/null and b/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg differ
diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2f795e18f1d431fa05527133eb43355645c412a7
Binary files /dev/null and b/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg differ
diff --git a/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg b/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..911e64f89765ac9e18cd8f3d8a1908859d74564b
Binary files /dev/null and b/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg differ
diff --git a/docs/base-css.html b/docs/base-css.html
index 6847c0616a0c8071e59a0130f9288f175fd50b20..27251d82442185677d46e03351b63f3b7841bc2d 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -368,7 +368,7 @@
<tr>
<td><code><pre class="prettyprint"></code></td>
<td>
- <p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
+ <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<pre class="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here…</p>
diff --git a/docs/javascript.html b/docs/javascript.html
index cc9c0d9eb7172329d8664c87ee983937cc3aa916..425d347cb8b9081a489e18be2b2ebacddfdc2a12 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1215,21 +1215,21 @@ $('#myCollapsible').on('hidden', function () {
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
- <img src="http://placehold.it/1000x500" alt="">
+ <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
- <img src="http://placehold.it/1000x500" alt="">
+ <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
- <img src="http://placehold.it/1000x500" alt="">
+ <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 401e86cbecb052f218f35b02238c5f92bb126044..2ac950251b6a32b6be5c772f5c41b9b358ae0077 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1155,21 +1155,21 @@ $('#myCollapsible').on('hidden', function () {
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
- <img src="http://placehold.it/1000x500" alt="">
+ <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>{{_i}}First Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
- <img src="http://placehold.it/1000x500" alt="">
+ <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>{{_i}}Second Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
- <img src="http://placehold.it/1000x500" alt="">
+ <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>{{_i}}Third Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
diff --git a/lib/carousel.less b/lib/carousel.less
index 1a18d44b6a9a3716249a055956316f76327acf8f..27c1ba660557cf52014b67c61a0048a8a2a2c5df 100644
--- a/lib/carousel.less
+++ b/lib/carousel.less
@@ -68,11 +68,13 @@
font-size: 60px;
font-weight: 100;
line-height: 30px;
- color: #ccc;
+ color: #fff;
text-align: center;
- background: @grayLight;
- background: rgba(0,0,0,.5);
- .border-radius(20px);
+ background: @grayDarker;
+ border: 3px solid #fff;
+ .border-radius(23px);
+ .opacity(50);
+ .transition(all .2s linear);
// Reposition the right one
&.right {
@@ -84,8 +86,7 @@
&:hover {
color: @white;
text-decoration: none;
- background: @grayDark;
- background: rgba(0,0,0,.75);
+ .opacity(90);
}
}