Initial markup, testing out font icons

This commit is contained in:
JC Brand 2013-08-09 20:25:21 +02:00
parent e268681541
commit 861887fd77
2 changed files with 9 additions and 42 deletions

View File

@ -6,6 +6,8 @@
* Dual licensed under the MIT and GPL Licenses * Dual licensed under the MIT and GPL Licenses
*/ */
@import url("fonticons/style.css");
.hidden { .hidden {
display: none display: none
} }
@ -301,13 +303,10 @@ dl.add-converse-contact {
.fancy-dropdown a.choose-xmpp-status, .fancy-dropdown a.choose-xmpp-status,
.fancy-dropdown a.toggle-xmpp-contact-form { .fancy-dropdown a.toggle-xmpp-contact-form {
text-shadow: 0 1px 0 rgba(255, 255, 255, 1); text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
padding-left: 2em;
display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
float: left; display: inline;
width: 130px;
} }
#fancy-xmpp-status-select a.change-xmpp-status-message { #fancy-xmpp-status-select a.change-xmpp-status-message {
@ -442,23 +441,6 @@ a.configure-chatroom-button {
clear: both; clear: both;
} }
#converse-roster dd.current-xmpp-contact,
#converse-roster dd.current-xmpp-contact:hover {
background: url(images/user_online_panel.png) no-repeat 5px 2px;
}
#converse-roster dd.current-xmpp-contact.offline:hover,
#converse-roster dd.current-xmpp-contact.unavailable:hover,
#converse-roster dd.current-xmpp-contact.offline,
#converse-roster dd.current-xmpp-contact.unavailable {
background: url(images/user_offline_panel.png) no-repeat 5px 2px;
}
#converse-roster dd.current-xmpp-contact.dnd,
#converse-roster dd.current-xmpp-contact.dnd:hover {
background: url(images/user_busy_panel.png) no-repeat 5px 2px;
}
#converse-roster dd.current-xmpp-contact.xa, #converse-roster dd.current-xmpp-contact.xa,
#converse-roster dd.current-xmpp-contact.xa:hover, #converse-roster dd.current-xmpp-contact.xa:hover,
#converse-roster dd.current-xmpp-contact.away, #converse-roster dd.current-xmpp-contact.away,
@ -479,14 +461,6 @@ a.configure-chatroom-button {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#converse-roster dd a {
margin-left: 1.3em;
}
#converse-roster dd span {
width: 125px;
}
.remove-xmpp-contact-dialog .ui-dialog-buttonpane { .remove-xmpp-contact-dialog .ui-dialog-buttonpane {
border: none; border: none;
} }
@ -582,18 +556,20 @@ dd.available-chatroom:hover a.open-room {
} }
#converse-roster dd a.remove-xmpp-contact { #converse-roster dd a.remove-xmpp-contact {
background: url('images/delete_icon.png') no-repeat right top;
padding: 0 0 1em 0;
float: right; float: right;
width: 22px; width: 22px;
margin: 0; margin: 0;
display: none; display: none;
color: rgb(102, 102, 102);
} }
#converse-roster dd:hover a.remove-xmpp-contact { #converse-roster dd:hover a.remove-xmpp-contact {
display: inline-block; display: inline-block;
} }
#converse-roster a.open-chat {
width: 85%;
}
#converse-roster dd:hover a.open-chat { #converse-roster dd:hover a.open-chat {
width: 75%; width: 75%;
} }
@ -831,19 +807,10 @@ form.add-xmpp-contact input {
} }
.chatbox .dropdown a { .chatbox .dropdown a {
padding: 3px 0 0 25px; padding: 3px 0 0 5px;
display: block;
height: 22px; height: 22px;
} }
.chatbox .dropdown a.toggle-xmpp-contact-form {
background: url('images/add_icon.png') no-repeat 4px 2px;
}
.chatbox .dropdown a.online {
background: url(images/user_online_panel.png) no-repeat 3px 4px;
}
.chatbox .dropdown a.offline { .chatbox .dropdown a.offline {
background: url(images/user_offline_panel.png) no-repeat 3px 4px; background: url(images/user_offline_panel.png) no-repeat 3px 4px;
} }

View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="chrome=1" /> <meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" /> <meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css"> <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<link rel="stylesheet" type="text/css" media="screen" href="converse.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
<script src="converse.min.js"></script> <script src="converse.min.js"></script>
<!-- For development <script data-main="main" src="components/requirejs/require.js"></script> --> <!-- For development <script data-main="main" src="components/requirejs/require.js"></script> -->
<title>Converse.js</title> <title>Converse.js</title>