Start managing converse.css via less

This commit is contained in:
JC Brand 2014-05-07 22:36:45 +02:00
parent e1e8825e7d
commit 5acd6baad7
8 changed files with 1413 additions and 28 deletions

View File

@ -11,7 +11,7 @@ ALLSPHINXOPTS = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) ./d
# the i18n builder cannot share the environment and doctrees with the others # the i18n builder cannot share the environment and doctrees with the others
I18NSPHINXOPTS = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) ./docs/source 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 all: dev
@ -75,6 +75,12 @@ dev: clean
npm install npm install
${BOWER} update; ${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 ## Tests

1358
css/converse.css Normal file

File diff suppressed because one or more lines are too long

View File

@ -34,7 +34,7 @@ p {
} }
} }
a { a {
color: #28c3ab; color: #66ccff;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@ -42,7 +42,7 @@ a {
a:hover, a:hover,
a:focus { a:focus {
text-decoration: none; text-decoration: none;
color: #176e61; color: #00aaff;
} }
.light { .light {
font-weight: 400; font-weight: 400;
@ -122,6 +122,9 @@ a:focus {
.features-section { .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); 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 { .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); 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; transition: all 0.3s ease-in-out;
} }
.btn-default { .btn-default {
border: 1px solid #28c3ab; border: 1px solid #66ccff;
color: #28c3ab; color: #66ccff;
background-color: transparent; background-color: transparent;
} }
.btn-default:hover, .btn-default:hover,
.btn-default:focus { .btn-default:focus {
border: 1px solid #28c3ab; border: 1px solid #66ccff;
outline: none; outline: none;
color: #000000; color: #000000;
background-color: #28c3ab; background-color: #66ccff;
} }
.btn-huge { .btn-huge {
padding: 25px; padding: 25px;

View File

@ -4,14 +4,14 @@
<title>Converse.js</title> <title>Converse.js</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; 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="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" /> <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/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="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="css/theme.css" rel="stylesheet" type="text/css" media="screen" />
<link href="converse.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> <script data-main="main" src="components/requirejs/require.js"></script>
</head> </head>

View File

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

2
less/styles.less Normal file
View File

@ -0,0 +1,2 @@
@import "variables.less";
@import "theme.less";

View File

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

22
less/variables.less Normal file
View File

@ -0,0 +1,22 @@
// 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%);