Add dark sandstone theme variation for Aurora (Bug 731678)

apps/mozorg/templates/mozorg/sandstone.html

@@ -47,6 +47,7 @@
       <li id="theme-stone"><a href="#" class="button-white"><span></span>Default <b>“stone”</b></a></li>
       <li id="theme-sand"><a href="#" class="button-white"><span></span>Mozilla <b>“sand”</b></a></li>
       <li id="theme-sky"><a href="#" class="button-white"><span></span>Firefox <b>“sky”</b></a></li>
+      <li id="theme-space"><a href="#" class="button-white"><span></span>Aurora <b>“space”</b></a></li>
     </ul>
   </div>
 
@@ -238,6 +239,7 @@
       $("body").addClass('stone');
       $("body").removeClass('sand');
       $("body").removeClass('sky');
+      $("body").removeClass('space');
       return false;
     });
 
@@ -245,6 +247,7 @@
       $("body").addClass('sand');
       $("body").removeClass('stone');
       $("body").removeClass('sky');
+      $("body").removeClass('space');
       return false;
     });
 
@@ -252,6 +255,15 @@
       $("body").addClass('sky');
       $("body").removeClass('stone');
       $("body").removeClass('sand');
+      $("body").removeClass('space');
+      return false;
+    });
+
+    $("#theme-space").click(function() {
+      $("body").addClass('space');
+      $("body").removeClass('stone');
+      $("body").removeClass('sand');
+      $("body").removeClass('sky');
       return false;
     });
   });

media/css/sandstone-guide.less

@@ -31,17 +31,21 @@
             }
         }
     }
-    li#theme-sand a span {
+    li#theme-sand  a span {
         background: url(/media/img/sandstone/bg-sand.png);
     }
-    li#theme-sky a span {
+    li#theme-sky   a span {
         background: url(/media/img/sandstone/bg-sky.png);
     }
+    li#theme-space a span {
+        background: url(/media/img/sandstone/bg-space.png);
+    }
 }
 
 .stone #theme-switcher #theme-stone .button-white,
 .sand  #theme-switcher #theme-sand  .button-white,
-.sky   #theme-switcher #theme-sky   .button-white {
+.sky   #theme-switcher #theme-sky   .button-white,
+.space #theme-switcher #theme-space .button-white {
     background: #d7d5d5;
     border-color: #bcb9b9;
     text-shadow: 0 1px #fff;

media/css/sandstone/sandstone.less

@@ -65,6 +65,41 @@ a {
 
 }
 
+.space {
+    color: #fff;
+
+    #wrapper {
+        background-color: #04020b;
+        background-image: url(/media/img/sandstone/bg-space.png);
+    }
+
+    a {
+        color: @linkSpaceBlue;
+        &:hover,
+        &:active {
+            color: lighten(@linkSpaceBlue, 10%);
+        }
+    }
+
+    h1, h2, h3, h4, h5, h6, .huge, .large {
+        color: #fff;
+        text-shadow: none;
+    }
+
+    #masthead {
+        nav {
+            li {
+                a,
+                a:link,
+                a:visited {
+                    color: @linkSpacePurple;
+                }
+            }
+        }
+    }
+
+}
+
 h1, h2, h3, h4, h5, h6, .huge, .large {
     .open-sans-light;
     display: block;
@@ -285,7 +320,7 @@ px      68    160    252    344    436    528    620    712    804    896    */
 #masthead {
 
     h2 {
-        padding: (@baseLine * 2)  0  (@baseLine * 1.5)  0;
+        padding: (@baseLine * 1.5)  0;
         margin: 0;
     }
 
@@ -296,8 +331,7 @@ px      68    160    252    344    436    528    620    712    804    896    */
         font-size: 13px;
         .open-sans;
 
-        ol li,
-        ul li {
+        li {
             .inline-block;
             list-style-type: none;
             margin: 0;
@@ -367,6 +401,9 @@ px      68    160    252    344    436    528    620    712    804    896    */
     background: #fff;
     border-bottom: 1px solid #ddd;
     .clearfix;
+    h1, h2, h3, h4, h5, h6, .huge, .large {
+        color: @textColorSecondary;
+    }
 }
 
 nav.menu-bar {
@@ -769,9 +806,6 @@ px      68    160    252    344    436    */
 
 
 
-/* {{{ Firefox site functionality 
-       This can be put into its own CSS file if needed. */
-
 // Don't display the dynamic platform images when js is disabled
 // because the ones in the noscript tag will be shown
 .no-js .platform-img.js {

media/css/sandstone/variables.less

@@ -1,11 +1,13 @@
 @textColorPrimary:   #333;
 @textColorSecondary: #484848;
-@textColorTertiary: #666;
+@textColorTertiary:  #666;
 @textColorLight:     #bbb;
 
-@linkRed:     rgb(175,50,50);
-@linkBlue:    rgb(41,131,200);
-@linkSkyBlue: rgb(103,167,208);
+@linkRed:            rgb(175,50,50);
+@linkBlue:           rgb(41,131,200);
+@linkSkyBlue:        rgb(103,167,208);
+@linkSpaceBlue:      rgb(47,138,202);
+@linkSpacePurple:    rgb(147,111,188);
 
 @buttonGreen: #81bc2e;
 @buttonGreenDark: darken(@buttonGreen, 10%);