More CSS and markup fixes after looking in FF.
Changed the icon-* selector to apply only to :before (fixes ugly font rendering in FF).
This commit is contained in:
JC Brand
parent
80d8b89797
commit
66c029ed3e
|
|
@ -229,7 +229,7 @@
|
|||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; }
|
||||
#conversejs [class^="icon-"], #conversejs [class*=" icon-"] {
|
||||
#conversejs [class^="icon-"]:before, #conversejs [class*=" icon-"]:before {
|
||||
background-position: 14px 14px;
|
||||
background-image: none;
|
||||
font-family: 'Converse-js';
|
||||
|
|
@ -1026,8 +1026,6 @@
|
|||
font-size: 14px;
|
||||
padding: 0.25em;
|
||||
min-height: 0; }
|
||||
#conversejs input[type=text] {
|
||||
height: 26px; }
|
||||
#conversejs strong {
|
||||
font-weight: 700; }
|
||||
#conversejs ol, #conversejs ul {
|
||||
|
|
@ -1235,7 +1233,7 @@
|
|||
float: right;
|
||||
font-size: 9px;
|
||||
margin: 0 0.2em;
|
||||
padding: 5px;
|
||||
padding: 0.5em;
|
||||
text-decoration: none; }
|
||||
#conversejs .chatbox-btn:active {
|
||||
position: relative;
|
||||
|
|
@ -1656,13 +1654,11 @@
|
|||
border: 1px solid #B1BFC4;
|
||||
height: 25px;
|
||||
border-radius: 4px;
|
||||
text-align: left; }
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
padding-left: 0.3em; }
|
||||
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status {
|
||||
width: 155px; }
|
||||
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status span {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
float: left; }
|
||||
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
|
||||
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
|
|
@ -1670,14 +1666,11 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline; }
|
||||
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form span {
|
||||
float: left; }
|
||||
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
|
||||
float: right;
|
||||
clear: right;
|
||||
height: 22px;
|
||||
width: 12px;
|
||||
margin: 0px 5px 0 0;
|
||||
margin-right: 0.3em;
|
||||
color: #2A9D8F; }
|
||||
#conversejs #controlbox .controlbox-pane {
|
||||
background-color: white;
|
||||
|
|
|
|||
|
|
@ -79,47 +79,37 @@
|
|||
<div id="users" class="controlbox-pane" style="display: block;">
|
||||
<form class="set-xmpp-status" action="" method="post">
|
||||
<span id="xmpp-status-holder">
|
||||
<dl id="target" class="dropdown">
|
||||
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
|
||||
<div class="xmpp-status">
|
||||
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
|
||||
<span class="icon-online"></span>
|
||||
I am online
|
||||
</a>
|
||||
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
|
||||
</div>
|
||||
</dt>
|
||||
<dd>
|
||||
<ul style="display: none;" class="xmpp-status-menu">
|
||||
<li>
|
||||
<a href="#" class="online" data-value="online">
|
||||
<span class="icon-online"></span>
|
||||
Online</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dnd" data-value="dnd">
|
||||
<span class="icon-dnd"></span>
|
||||
Busy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="away" data-value="away">
|
||||
<span class="icon-away"></span>
|
||||
Away</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="offline" data-value="offline">
|
||||
<span class="icon-offline"></span>
|
||||
Offline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl id="target" class="dropdown">
|
||||
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
|
||||
<div class="xmpp-status">
|
||||
<a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
|
||||
I am online
|
||||
</a>
|
||||
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
|
||||
</div>
|
||||
</dt>
|
||||
<dd>
|
||||
<ul style="display: none;" class="xmpp-status-menu">
|
||||
<li>
|
||||
<a href="#" class="online icon-online" data-value="online">Online</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="away icon-away" data-value="away">Away</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="offline icon-offline" data-value="offline">Offline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</span>
|
||||
</form>
|
||||
<dl class="add-converse-contact dropdown">
|
||||
<dt id="xmpp-contact-search" class="fancy-dropdown">
|
||||
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
|
||||
<span class="icon-plus"></span>
|
||||
<a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
|
||||
Add a contact
|
||||
</a>
|
||||
</dt>
|
||||
|
|
@ -127,7 +117,7 @@
|
|||
<ul>
|
||||
<li>
|
||||
<form class="pure-form add-xmpp-contact">
|
||||
<input type="text" name="identifier" class="username" placeholder="Contact username">
|
||||
<input type="text" name="identifier" class="username" placeholder="e.g. user@example">
|
||||
<button class="pure-button button-primary" type="submit">Add</button>
|
||||
</form>
|
||||
</li>
|
||||
|
|
@ -146,7 +136,7 @@
|
|||
|
||||
<dl class="roster-contacts" style="display: block;">
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
|
||||
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Colleagues</a>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
|
||||
|
|
@ -170,7 +160,7 @@
|
|||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
|
||||
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Family</a>
|
||||
</dt>
|
||||
<dd class="away current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
|
|
@ -187,7 +177,7 @@
|
|||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
|
||||
<a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Friends</a>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
|
|
@ -204,7 +194,7 @@
|
|||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
|
||||
<a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Ungrouped</a>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
|
|
@ -214,7 +204,7 @@
|
|||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
|
||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
|
||||
<a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Contact Requests</a>
|
||||
</dt>
|
||||
<dd class="offline requesting-xmpp-contact">
|
||||
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
|
||||
|
|
|
|||
|
|
@ -43,8 +43,7 @@
|
|||
<dl id="target" class="dropdown">
|
||||
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
|
||||
<div class="xmpp-status">
|
||||
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
|
||||
<span class="icon-online"></span>
|
||||
<a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
|
||||
I am online
|
||||
</a>
|
||||
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
|
||||
|
|
@ -53,23 +52,16 @@
|
|||
<dd>
|
||||
<ul style="display: none;" class="xmpp-status-menu">
|
||||
<li>
|
||||
<a href="#" class="online" data-value="online">
|
||||
<span class="icon-online"></span>
|
||||
Online</a>
|
||||
<a href="#" class="online icon-online" data-value="online">Online</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dnd" data-value="dnd">
|
||||
<span class="icon-dnd"></span>
|
||||
Busy</a>
|
||||
<a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="away" data-value="away">
|
||||
<span class="icon-away"></span>
|
||||
Away</a>
|
||||
<a href="#" class="away icon-away" data-value="away">Away</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="offline" data-value="offline">
|
||||
<span class="icon-offline"></span>
|
||||
<a href="#" class="offline icon-offline" data-value="offline">
|
||||
Offline</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -79,8 +71,7 @@
|
|||
</form>
|
||||
<dl class="add-converse-contact dropdown">
|
||||
<dt id="xmpp-contact-search" class="fancy-dropdown">
|
||||
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
|
||||
<span class="icon-plus"></span>
|
||||
<a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
|
||||
Add a contact
|
||||
</a>
|
||||
</dt>
|
||||
|
|
@ -247,13 +238,13 @@
|
|||
<div class="dragresize dragresize-topleft"></div>
|
||||
<div class="dragresize dragresize-left"></div>
|
||||
<div class="chat-head chat-head-chatbox">
|
||||
<a class="chatbox-btn close-chatbox-button icon-close" title="Close this chat box"></a>
|
||||
<a class="chatbox-btn toggle-chatbox-button icon-minus" title="Minimize this chat box"></a>
|
||||
<a class="chatbox-btn toggle-chatbox-button icon-eye" title="View more information on this person"></a>
|
||||
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||
<a class="chatbox-btn toggle-chatbox-button icon-eye"></a>
|
||||
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
|
||||
<div class="chat-title">
|
||||
<a href="http://opkode.com" target="_blank" class="user">
|
||||
Jan-Carel Brand
|
||||
JC Brand
|
||||
</a>
|
||||
</div>
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
float: right;
|
||||
font-size: $box-close-font-size;
|
||||
margin: 0 0.2em;
|
||||
padding: 5px;
|
||||
padding: 0.5em;
|
||||
text-decoration: none;
|
||||
&:active {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -268,15 +268,12 @@
|
|||
.fancy-dropdown {
|
||||
border: 1px solid $light-background-border-color;
|
||||
height: $controlbox-dropdown-height;
|
||||
border-radius: 4px;
|
||||
border-radius: $chatbox-border-radius;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
padding-left: 0.3em;
|
||||
.choose-xmpp-status {
|
||||
width: 155px;
|
||||
span {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.choose-xmpp-status,
|
||||
.toggle-xmpp-contact-form {
|
||||
|
|
@ -286,17 +283,13 @@
|
|||
white-space: nowrap;
|
||||
display: inline;
|
||||
}
|
||||
.toggle-xmpp-contact-form span {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
#fancy-xmpp-status-select {
|
||||
a.change-xmpp-status-message {
|
||||
float: right;
|
||||
clear: right;
|
||||
height: 22px;
|
||||
width: 12px;
|
||||
margin: 0px 5px 0 0;
|
||||
margin-right: 0.3em;
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
background-position: 14px 14px;
|
||||
background-image: none;
|
||||
font-family: 'Converse-js';
|
||||
|
|
|
|||
|
|
@ -38,10 +38,6 @@
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<dl class="add-converse-contact dropdown">
|
||||
<dt id="xmpp-contact-search" class="fancy-dropdown">
|
||||
<a class="toggle-xmpp-contact-form" href="#"
|
||||
title="{{label_click_to_chat}}">
|
||||
<span class="icon-plus"></span>{{label_add_contact}}</a>
|
||||
<a class="toggle-xmpp-contact-form icon-plus" href="#" title="{{label_click_to_chat}}"> {{label_add_contact}}</a>
|
||||
</dt>
|
||||
<dd class="search-xmpp" style="display:none"><ul></ul></dd>
|
||||
</dl>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<div class="xmpp-status">
|
||||
<a class="choose-xmpp-status {{chat_status}}"
|
||||
data-value="{{status_message}}"
|
||||
href="#" title="{{desc_change_status}}">
|
||||
|
||||
<span class="icon-{{chat_status}}"></span>{{status_message}}
|
||||
<a class="choose-xmpp-status {{chat_status}} icon-{{chat_status}}" data-value="{{status_message}}" href="#" title="{{desc_change_status}}">
|
||||
{{status_message}}
|
||||
</a>
|
||||
<a class="change-xmpp-status-message icon-pencil"
|
||||
href="#"
|
||||
title="{{desc_custom_status}}"></a>
|
||||
<a class="change-xmpp-status-message icon-pencil" href="#" title="{{desc_custom_status}}"></a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user