Remove the jQuery-ui dependency.

* add a simple jQuery tab plugin
* add tabs styling in the CSS
* some code factorisation
* code formatting in the js and the css

1 files changed, 249 insertions, 90 deletions

diff --git a/webclient/style/alias.css b/webclient/style/alias.css
index 1608679..9e96f88 100644
--- a/webclient/style/alias.css
+++ b/webclient/style/alias.css
@@ -1,199 +1,358 @@
 @font-face {
-	font-family: "street";
-	src: url("images/bold.ttf");
-	font-weight:bold;
+    font-family: "street";
+    src: url("images/bold.ttf");
+    font-weight: bold;
 }
 
+a
+{
+    color: #3058A3;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover
+{
+    text-decoration: underline;
+}
+
+hr
+{
+    color: #D8D8D8;
+    border-bottom: 1px solid white;
+}
 
 html
 {
-	height:100%;	
+    height: 100%;
 }
 
 body
 {
-	padding: 0px;
-	margin: 0px;
-	font-family: sans-serif;
-	height:100%;
-	background-image:url('images/bb.png');
+    padding: 0px;
+    margin: 0px;
+    font-family: sans-serif;
+    height: 100%;
+    background-image: url('images/bb.png');
 }
 
 div
 {
-	margin:0px;
-	padding:0px;	
+    margin: 0px;
+    padding: 0px;
+}
+
+.info
+{
+    font-style: italic;
 }
 
 input
 {
-	border: 1px solid black;
+    border: 1px solid black;
 }
 
 #login
 {
-	display: none;	
+    width: 400px;
+    height: 300px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -200px;
+    margin-top: -150px;
+    background-color: #F4F4F4;
+    box-shadow: 5px 5px 5px 0px #434343;
+    border-radius: 10px;
+    color: #313131;
+}
+
+#login h2
+{
+    margin: 0px;
+    background-image: -moz-linear-gradient(top center, white, #D8D8D8);
+    background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#D9D9D9));
+    border-bottom: 1px solid #CDCDCD;
+    color: #3058A3;
+    font-family: "street";
+    font-size: 120%;
+    font-weight: bold;
+    padding-left: 10px;
+    text-shadow: 0px 1px 0px #EBEBEB;
+    border-radius: 10px 10px 0px 0px;
 }
+
+#login label
+{
+    float: left;
+    width: 8em;
+}
+
+#login .info
+{
+    margin: 0px;
+}
+
+#login .content
+{
+    padding: 1em;
+}
+
+#login .connect
+{
+    text-align: center;
+    margin-top: 2em;
+}
+
+#connect
+{
+    height: 2.5em;
+    border: 1px solid #6D6D6D;
+    border-radius: 5px;
+    font-weight: bold;
+    background-color: #DEDEDE;
+}
+
+#connect:hover
+{
+    color: white;
+    background-color: #3058A3;
+}
+
 #bottom
 {
-	position:fixed;
-	bottom:0px;
-	width:100%;
-	clear:both;
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    clear: both;
 }
 
 #bottomup
 {
-	text-align: right;	
+    text-align: right;
 }
-	
+
 #consolea
 {
-	text-decoration: none;
-	color : black;
-	background-color : gray;
-	margin:0px;
-	padding-left:5px;
-	padding-right:5px;
-	padding-top:5px;
+    text-decoration: none;
+    color: black;
+    background-color: gray;
+    margin: 0px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 5px;
 }
-	
+
 #log
 {
-	height:400px;
-	width:100%;
-	overflow:auto;
-	display:none;
-	border-top:1px solid black;
+    height: 400px;
+    width: 100%;
+    overflow: auto;
+    display: none;
+    border-top: 1px solid black;
 }
 
 #header
 {
-	margin:0px;
-	margin-bottom:15px;
-	background-image: -moz-linear-gradient(top center, white, #AEB2B1);
-	background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#D9D9D9));
-	border-bottom:1px solid #CDCDCD;
-	box-shadow: 0px 5px 10px #434343;
+    margin: 0px;
+    margin-bottom: 15px;
+    background-image: -moz-linear-gradient(top center, white, #AEB2B1);
+    background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#D9D9D9));
+    border-bottom: 1px solid #CDCDCD;
+    box-shadow: 0px 5px 10px #434343;
 }
 
 
 #logo
 {
-	color:#004B6B;
-	font-family: "street";
-	font-size:200%;
-	font-weight:bold;
-	padding-left:20px;
-	text-shadow: 0px 1px 0px #EBEBEB;
+    color: #3058A3;
+    font-family: "street";
+    font-size: 200%;
+    font-weight: bold;
+    padding-left: 20px;
+    text-shadow: 0px 1px 0px #EBEBEB;
 }
 
 #left
 {
-	margin:0px;
-	margin-right:2%;
-	float:left;	
-	width:20%;
-	background-color:white;
-	height:88%;
+    margin: 0px;
+    margin-right: 2%;
+    float: left;
+    width: 20%;
+    background-color: white;
+    height: 88%;
+    display: none;
 }
 
 #right
 {
-	float:left;
-	width:78%;
-	height:88%;
+    float: left;
+    width: 78%;
+    height: 88%;
+    display: none;
+    background-color: white;
+    padding: 0px;
 }
 
 #tabs{
-	height:100%;	
+    height: 100%;
+    padding: 0px;
+}
+
+ul.tabbar{
+    background-color: #E9E9E9;
+    border-bottom: 1px solid #9C9C9C;
+    border-top: 1px solid white;
+    padding: 0px;
+    margin: 0px;
+    list-style-type: none;
+    height: 45px;
+}
+
+ul.tabbar > li{
+    background-color: #B6B6B6;
+    padding: 10px;
+    padding-right: 5px;
+    margin: 0px;
+    margin-left: 0.5em;
+    height: 20px;
+    float: left;
+    display: block;
+    margin-top: 4px;
+}
+
+ul.tabbar > li.selected{
+    border-bottom: 1px solid white;
+    border-left: 1px solid #9C9C9C;
+    border-top: 1px solid #9C9C9C;
+    border-right: 1px solid #9C9C9C;
+    background-color: white;
+}
+
+ul.tabbar > li:hover{
+    background-color: #3058A3;
+    color: white;
+    cursor: pointer;
+}
+
+ul.tabbar > li > span.tab-close{
+    display: block;
+    width: 15px;
+    height: 15px;
+    float: right;
+    margin-left: 5px;
+    margin-top: 2px;
+    background-image: url("images/cross.png");
+}
+
+ul.tabbar > li:hover > span.tab-close{
+    background-image: url("images/cross2.png");
+}
+
+ul.tabbar > li > a{
+    color: inherit;
+}
+
+ul.tabbar > li > a:hover{
+    text-decoration: none;
+}
+
+ul.tabbar > li > a:focus{
+    border: none;
+}
+
+.tab{
+    padding: 10px;
+    height: 100%;
+    display: none;
 }
 
 .chat-messages{
-	border:1px solid #dddddd;
-	height:80%;
-	margin-bottom:10px;
-	overflow : auto;
+    height: 80%;
+    width: 100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+    border: 1px solid #787878;
 }
 
 .chat-message{
-	margin: 0px;	
+    margin: 0px;
 }
 
 .chat-name{
-	margin-right:10px;
-	font-weight:bold;
-	color : #0073EA;
+    font-weight: bold;
+    color: #0073EA;
 }
 
 .me{
-	color : #FF0084;	
+    color: #FF0084;
 }
 
 .chat-name:before{
-	content : "<"
+    content: "<";
 }
 
 .chat-name:after{
-	content : ">"	
+    content: ">";
 }
 
 .chat-input{
-	border:1px solid #dddddd;
-	width:100%;	
+    width: 100%;
+    border: 1px solid #787878;
 }
 
 #roster
 {
-	height:100%;
-	font-size:0.8em;
-	padding:5px;
+    height: 100%;
+    font-size: 0.8em;
+    padding: 5px;
 }
 
 #roster > ul
 {
-	list-style-type: none;
-	padding: 0px;	
+    list-style-type: none;
+    padding: 0px;
 }
 
 .roster-contact
 {
-	-moz-transition-property : background-color, box-shadow;
-	-moz-transition-duration: 0.5s;
-	-webkit-transition-property : background-color;
-	-webkit-transition-duration: 1s;
-	-o-transition-property : background-color;
-	-o-transition-duration: 1s;
-	border-bottom : 1px dotted black;
-	padding: 5px;
-	cursor: pointer;
+    -moz-transition-property: background-color, box-shadow;
+    -moz-transition-duration: 0.5s;
+    -webkit-transition-property: background-color;
+    -webkit-transition-duration: 1s;
+    -o-transition-property: background-color;
+    -o-transition-duration: 1s;
+    border-bottom: 1px dotted black;
+    padding: 5px;
+    cursor: pointer;
 }
 
 .roster-contact:hover
 {
-	background-color: #E5E9EE;
-	box-shadow: 5px 0px 5px #888;
+    background-color: #E5E9EE;
+    box-shadow: 5px 0px 5px #888;
 }
 
 .roster-name
 {
-	font-weight:bold;
+    font-weight: bold;
 }
 
 .online
 {
-	background-color: #DBFFDC;
+    background-color: #DBFFDC;
 }
 
 .away
 {
-	background-color: #E3E3E3; 	
+    background-color: #E3E3E3;
 }
 
 #status
 {
-	margin:0px;
-	margin-top:10px;
-	margin-right:10px;
-	float:right;	
+    margin: 0px;
+    margin-top: 10px;
+    margin-right: 10px;
+    float: right;
 }
\ No newline at end of file