Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Start managing converse.css via less

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Makefile
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
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

1358
css/converse.css Normal file
View File

File diff suppressed because one or more lines are too long

15
css/theme.css
View File

@ -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;

8
index.html
View File

@ -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>

18
converse.css → less/converse.less
View File

@ -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;

2
less/styles.less Normal file
View File

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

10
less/theme.less
View File

@ -1,9 +1,3 @@
// 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,

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%);