Start managing converse.css via less

Makefile

@@ -11,7 +11,7 @@ ALLSPHINXOPTS   = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) ./d
 # the i18n builder cannot share the environment and doctrees with the others
 I18NSPHINXOPTS  = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) ./docs/source
 
-.PHONY: all help clean html epub changes linkcheck gettext po pot po2json merge release
+.PHONY: all help clean html epub changes linkcheck gettext po pot po2json merge release css
 
 all: dev
 
@@ -75,6 +75,12 @@ dev: clean
 	npm install
 	${BOWER} update;
 
+########################################################################
+## Builds
+
+css::
+	./node_modules/.bin/lessc less/styles.less > css/theme.css
+	./node_modules/.bin/lessc less/converse.less > css/converse.css
 
 ########################################################################
 ## Tests

css/theme.css

@@ -34,7 +34,7 @@ p {
   }
 }
 a {
-  color: #28c3ab;
+  color: #66ccff;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
@@ -42,7 +42,7 @@ a {
 a:hover,
 a:focus {
   text-decoration: none;
-  color: #176e61;
+  color: #00aaff;
 }
 .light {
   font-weight: 400;
@@ -122,6 +122,9 @@ a:focus {
 .features-section {
   background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #b39c68, #a56365, #412e4c);
 }
+.features-section a {
+  color: #66ccff;
+}
 .outro {
   background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
 }
@@ -241,16 +244,16 @@ a:focus {
   transition: all 0.3s ease-in-out;
 }
 .btn-default {
-  border: 1px solid #28c3ab;
-  color: #28c3ab;
+  border: 1px solid #66ccff;
+  color: #66ccff;
   background-color: transparent;
 }
 .btn-default:hover,
 .btn-default:focus {
-  border: 1px solid #28c3ab;
+  border: 1px solid #66ccff;
   outline: none;
   color: #000000;
-  background-color: #28c3ab;
+  background-color: #66ccff;
 }
 .btn-huge {
   padding: 25px;

index.html

@@ -4,14 +4,14 @@
     <title>Converse.js</title>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Converse.js: A free chat client for your website" />
-    <meta name="author" content="JC Brand">
+    <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-    <link href="css/theme.css" rel="stylesheet">
-    <link href="converse.css" rel="stylesheet" type="text/css" media="screen">
+    <link href="css/theme.css" rel="stylesheet" type="text/css" media="screen" />
+    <link href="css/converse.css" rel="stylesheet" type="text/css" media="screen" />
     <script data-main="main" src="components/requirejs/require.js"></script>
 </head>
 

converse.css → less/converse.less

@@ -6,6 +6,8 @@
  * Dual licensed under the MIT and GPL Licenses
  */
 
+@import "variables.less";
+
 @font-face {
 	font-family: 'Converse-js';
 	src:url('fonticons/fonts/Converse-js.eot');
@@ -671,9 +673,7 @@ span.spinner.hor_centered {
 }
 
 #conversejs .chat-content {
-    height: -moz-calc(100% - 76px);
-    height: -o-calc(100% - 76px);
-    height: calc(100% - 76px);
+    height: 206px;
 }
 
 #conversejs .chat-info {
@@ -1008,9 +1008,7 @@ dl.add-converse-contact {
     width: 100%;
     position: relative;
     margin: 0.5em 0 0 0;
-    height: -moz-calc(100% - 70px);
-    height: -o-calc(100% - 70px);
-    height: calc(100% - 70px);
+    height: 254px;
 }
 
 #conversejs dd.available-chatroom {
@@ -1251,9 +1249,7 @@ select#select-xmpp-status {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
     width: 100%;
-    height: -moz-calc(100% - 38px);
-    height: -o-calc(100% - 38px);
-    height: calc(100% - 38px);
+    height: 289px;
     overflow-y: hidden;
     position: absolute;
 }
@@ -1294,7 +1290,7 @@ select#select-xmpp-status {
     padding: 3px;
     border-radius: 4px;
     resize: none;
-    height: 54px;
+    height: 62px;
 }
 
 #conversejs ul.chat-toolbar {
@@ -1504,7 +1500,7 @@ input.custom-xmpp-status {
 #conversejs .box-flyout {
     position: absolute;
     display: block;
-    bottom: 1px;
+    bottom: 6px;
     box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
     border-radius: 4px;
     height: 324px;

less/styles.less

+@import "variables.less";
+@import "theme.less";

less/theme.less

-// Variables
-
-@primary: #28c3ab;
-@dark: #000;
-@light: #fff;
-
 // LESS
 
 body {
@@ -159,6 +153,10 @@ a:focus {
         linear-gradient(45deg, #b39c68, #a56365, #412e4c);
 }
 
+.features-section  a{
+    color: @primaryLight;
+}
+
 .outro {
     background: url('images/bgtr.svg') top right no-repeat,
         url('images/bgbl.svg') bottom left no-repeat,

less/variables.less

+// Variables
+
+@primary: #66ccff;
+@dark: #000;
+@light: #fff;
+
+// Primary Variants -
+@primaryLight:   hsl(hue(@primary), 100%, 70%);
+@primaryDark:    hsl(hue(@primary), 60%, 40%);
+@primaryFaded:   hsl(hue(@primary), 60%, 65%);
+ 
+// 180degree Variants
+@variant:         spin((@primary), 180);
+@variantLight:    hsl(hue(@variant), 100%, 70%);
+@variantDark:     hsl(hue(@variant), 60%, 40%);
+@variantFaded:    hsl(hue(@variant), 60%, 65%);
+ 
+// 90degree Variants
+@corner:         spin((@primary), 70);
+@cornerLight:    hsl(hue(@corner), 100%, 70%);
+@cornerDark:     hsl(hue(@corner), 60%, 40%);
+@cornerFaded:    hsl(hue(@corner), 60%, 65%);