Overhaul carousel a bit more:

* Drop custom type arrow controls for glyphicons icons instead for more consistent rendering
* Remove the captions and instead let folks implement what they want in the carousel
* Move the indicators to the bottom middle instead of top right
* Lighten up gradients on the edges for less harsh lighting

1 files changed, 38 insertions, 42 deletions

diff --git a/less/carousel.less b/less/carousel.less
index 8696d4155..167ee52ec 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -3,18 +3,20 @@
 // --------------------------------------------------
 
 
+// Wrapper for the slide container and indicators
 .carousel {
   position: relative;
-  margin-bottom: @line-height-base;
   line-height: 1;
 }
 
+// Wrap all slides, but only show the active one
 .carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
 }
 
+// Immediate parent of all slides
 .carousel-inner {
 
   > .item {
@@ -85,13 +87,13 @@
 
   // Set gradients for backgrounds
   &.left {
-    #gradient > .horizontal(rgba(0,0,0,.75), rgba(0,0,0,.001));
+    #gradient > .horizontal(rgba(0,0,0,.5), rgba(0,0,0,.001));
     background-color: transparent;
   }
   &.right {
     left: auto;
     right: 0;
-    #gradient > .horizontal(rgba(0,0,0,.001), rgba(0,0,0,.75));
+    #gradient > .horizontal(rgba(0,0,0,.001), rgba(0,0,0,.5));
     background-color: transparent;
   }
 
@@ -104,20 +106,22 @@
   }
 
   // Toggles
-  .control {
+  .carousel-control .glyphicon-chevron-left,
+  .carousel-control .glyphicon-chevron-right {
     position: absolute;
     top: 50%;
     z-index: 5;
-    display: block;
-    margin-top: -35px;
-    margin-left: 30px;
-    font-size: 80px;
-    font-weight: 100;
+    display: inline-block;
+    width:  20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: 20px;
+    font-size: 20px;
     color: #fff;
     text-shadow: 0 1px 2px rgba(0,0,0,.6);
   }
-  &.right .control {
-    margin-left: 70px;
+  .carousel-control .glyphicon-chevron-right {
+    margin-left: 80px;
   }
 }
 
@@ -125,21 +129,22 @@
 // -----------------------------
 .carousel-indicators {
   position: absolute;
-  top: 15px;
-  right: 15px;
+  bottom: 15px;
+  left: 50%;
   z-index: 5;
-  margin: 0;
+  width: 100px;
+  margin: 0 0 0 -50px;
   list-style: none;
+  text-align: center;
 
   li {
-    display: block;
-    float: left;
-    width: 10px;
-    height: 10px;
-    margin-left: 5px;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-left: 0;
+    margin-right: 0;
     text-indent: -999px;
-    background-color: #ccc;
-    background-color: rgba(255,255,255,.25);
+    border: 1px solid #fff;
     border-radius: 5px;
     cursor: pointer;
   }
@@ -149,28 +154,19 @@
 }
 
 
-// Caption for text below images
-// -----------------------------
-
-.carousel-caption {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  padding: 40px;
-  text-shadow: 0 1px 2px rgba(0,0,0,.6);
-  max-width: 60%;
+// Scale up controls for >768px
+@media screen and (min-width: 768px) {
 
-  h3,
-  p {
-    color: #fff;
-    line-height: @line-height-base;
-  }
-  h3 {
-    margin: 0 0 5px;
+  .carousel-control .glyphicon-chevron-left,
+  .carousel-control .glyphicon-chevron-right {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    margin-left: 30px;
+    font-size: 30px;
   }
-  p {
-    margin-bottom: 0;
+  .carousel-control .glyphicon-chevron-right {
+    margin-left: 70px;
   }
+
 }