Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
6879405e85
xmpp.chapril.org-conversejs/css/converse.css
c143 07fe029e41 Added a grey color for visitors 
You don't see visitors without hovering the specific user. So you would have to check everyone by yourself. This highlights them grey. (You're also marked as visitor when you're muted)
2015-03-26 09:49:51 +01:00

1253 lines
39 KiB
CSS
Raw Blame History

/*!
* Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org
*
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@font-face {
font-family: 'Converse-js';
src: url("../fonticons/fonts/icomoon.eot?-mnoxh0");
src: url("../fonticons/fonts/icomoon.eot?#iefix-mnoxh0") format("embedded-opentype"), url("../fonticons/fonts/icomoon.woff?-mnoxh0") format("woff"), url("../fonticons/fonts/icomoon.ttf?-mnoxh0") format("truetype"), url("../fonticons/fonts/icomoon.svg?-mnoxh0#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
.icon-conversejs {
font-family: 'Converse-js';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.icon-conversejs:before {
content: "\e600"; }
#conversejs {
color: #6C4C44;
font-size: 14px;
bottom: 0;
direction: ltr;
height: 35px;
left: 0;
position: fixed;
right: 0;
z-index: 30;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* @group Tabs */
/* status dropdown styles */ }
#conversejs ::selection {
background-color: #E3C9C1; }
#conversejs *, #conversejs *:before, #conversejs *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 5px 10px; } }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #436F64;
text-shadow: none; }
#conversejs ul li {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
#conversejs textarea,
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 14px;
padding: 0.25em;
min-height: 0; }
#conversejs input[type=text] {
height: 26px; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
list-style: none; }
#conversejs li {
height: 10px; }
#conversejs ul, #conversejs ol, #conversejs dl {
font: inherit;
margin: 0; }
#conversejs [data-icon]:before {
content: attr(data-icon);
font-family: 'Converse-js';
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#conversejs [class^="icon-"], #conversejs [class*=" icon-"] {
background-position: 14px 14px;
background-image: none;
font-family: 'Converse-js';
font-style: normal;
font-variant: normal;
font-weight: normal;
width: auto;
height: auto;
line-height: 1;
speak: none;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#conversejs .icon-address-book:before {
content: "\270f"; }
#conversejs .icon-angry:before {
content: "\e03f"; }
#conversejs .icon-attachment:before {
content: "\e032"; }
#conversejs .icon-away:before {
content: "\25fb"; }
#conversejs .icon-blocked:before {
content: "\2718"; }
#conversejs .icon-bold:before {
content: "\e04d"; }
#conversejs .icon-bubbles-2:before {
content: "\e016"; }
#conversejs .icon-bubbles-3:before {
content: "\e017"; }
#conversejs .icon-bubbles:before {
content: "\e015"; }
#conversejs .icon-camera-2:before {
content: "\2616"; }
#conversejs .icon-camera:before {
content: "\e003"; }
#conversejs .icon-cancel-circle:before {
content: "\e058"; }
#conversejs .icon-checkbox-checked:before {
content: "\2611"; }
#conversejs .icon-checkbox-partial:before {
content: "\2b28"; }
#conversejs .icon-checkbox-unchecked:before {
content: "\2b27"; }
#conversejs .icon-checkmark:before {
content: "\2713"; }
#conversejs .icon-close:before {
content: "\2715"; }
#conversejs .icon-closed:before {
content: "\25ba"; }
#conversejs .icon-cog:before {
content: "\e02f"; }
#conversejs .icon-cogs:before {
content: "\e022"; }
#conversejs .icon-confused:before {
content: "\2368"; }
#conversejs .icon-cool:before {
content: "\e040"; }
#conversejs .icon-dnd:before {
content: "\e004"; }
#conversejs .icon-envelop:before {
content: "\2709"; }
#conversejs .icon-evil:before {
content: "\261f"; }
#conversejs .icon-eye-blocked:before {
content: "\e031"; }
#conversejs .icon-eye:before {
content: "\e030"; }
#conversejs .icon-globe:before {
content: "\e033"; }
#conversejs .icon-grin:before {
content: "\e041"; }
#conversejs .icon-happy:before {
content: "\263b"; }
#conversejs .icon-headphones:before {
content: "\266c"; }
#conversejs .icon-heart:before {
content: "\2764"; }
#conversejs .icon-hide-users:before {
content: "\e01c"; }
#conversejs .icon-home:before {
content: "\e000"; }
#conversejs .icon-image:before {
content: "\2b14"; }
#conversejs .icon-info:before {
content: "\2360"; }
#conversejs .icon-italic:before {
content: "\e04f"; }
#conversejs .icon-key-2:before {
content: "\e029"; }
#conversejs .icon-key:before {
content: "\e028"; }
#conversejs .icon-lock-2:before {
content: "\e027"; }
#conversejs .icon-lock:before {
content: "\e026"; }
#conversejs .icon-logout:before {
content: "\e601"; }
#conversejs .icon-minus:before {
content: "\e05a"; }
#conversejs .icon-music:before {
content: "\266b"; }
#conversejs .icon-new-tab:before {
content: "\e053"; }
#conversejs .icon-newspaper:before {
content: "\e001"; }
#conversejs .icon-notebook:before {
content: "\2710"; }
#conversejs .icon-notification:before {
content: "\e01f"; }
#conversejs .icon-online:before {
content: "\25fc"; }
#conversejs .icon-opened:before {
content: "\25bc"; }
#conversejs .icon-pencil:before {
content: "\270e"; }
#conversejs .icon-phone-hang-up:before {
content: "\260e"; }
#conversejs .icon-phone:before {
content: "\260f"; }
#conversejs .icon-play:before {
content: "\25d9"; }
#conversejs .icon-plus:before {
content: "\271a"; }
#conversejs .icon-pushpin:before {
content: "\e012"; }
#conversejs .icon-quotes-left:before {
content: "\e01d"; }
#conversejs .icon-radio-checked:before {
content: "\2b26"; }
#conversejs .icon-radio-unchecked:before {
content: "\2b25"; }
#conversejs .icon-remove:before {
content: "\e02d"; }
#conversejs .icon-room-info:before {
content: "\e059"; }
#conversejs .icon-sad:before {
content: "\2639"; }
#conversejs .icon-search:before {
content: "\e021"; }
#conversejs .icon-shocked:before {
content: "\2364"; }
#conversejs .icon-show-users:before {
content: "\e01e"; }
#conversejs .icon-smiley:before {
content: "\263a"; }
#conversejs .icon-spell-check:before {
content: "\e045"; }
#conversejs .icon-spinner:before {
content: "\231b"; }
#conversejs .icon-strikethrough:before {
content: "\e050"; }
#conversejs .icon-thumbs-up:before {
content: "\261d"; }
#conversejs .icon-tongue:before {
content: "\e038"; }
#conversejs .icon-underline:before {
content: "\e04e"; }
#conversejs .icon-unlocked:before {
content: "\e025"; }
#conversejs .icon-user:before {
content: "\e01a"; }
#conversejs .icon-users:before {
content: "\e01b"; }
#conversejs .icon-volume-decrease:before {
content: "\e04b"; }
#conversejs .icon-volume-high:before {
content: "\e046"; }
#conversejs .icon-volume-increase:before {
content: "\e04c"; }
#conversejs .icon-volume-low:before {
content: "\e048"; }
#conversejs .icon-volume-medium:before {
content: "\e047"; }
#conversejs .icon-volume-mute-2:before {
content: "\e04a"; }
#conversejs .icon-volume-mute:before {
content: "\e049"; }
#conversejs .icon-warning:before {
content: "\26a0"; }
#conversejs .icon-wink:before {
content: "\e03a"; }
#conversejs .icon-wondering:before {
content: "\2369"; }
#conversejs .icon-wrench:before {
content: "\e024"; }
#conversejs .icon-xa:before,
#conversejs .icon-unavailable:before,
#conversejs .icon-offline:before {
content: "\e002"; }
#conversejs .icon-youtube:before {
content: "\e055"; }
#conversejs .icon-zoom-in:before {
content: "\e02b"; }
#conversejs .icon-zoom-out:before {
content: "\e02a"; }
#conversejs .no-text-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
#conversejs .emoticon {
font-size: 14px; }
#conversejs .left {
float: left; }
#conversejs .right {
float: right; }
#conversejs .hidden {
display: none; }
#conversejs .locked {
padding-right: 22px; }
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg); }
to {
-webkit-transform: rotate(359deg); } }
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg); }
to {
-moz-transform: rotate(359deg); } }
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg);
transform: rotate(359deg); } }
#conversejs .spinner:before {
font-size: 24px;
font-family: 'Converse-js' !important;
content: "\231b"; }
#conversejs .spinner {
-webkit-animation: spin 2s infinite, linear;
-moz-animation: spin 2s infinite, linear;
animation: spin 2s infinite, linear;
display: block;
text-align: center;
margin: 5px; }
#conversejs .centered {
text-align: center;
display: block;
margin: 5em auto; }
#conversejs .hor_centered {
text-align: center;
display: block;
margin: 0 auto; }
#conversejs .toggle-controlbox,
#conversejs #minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
float: right;
margin: 0 7px;
font-weight: bold; }
#conversejs .toggle-controlbox {
background-color: #436F64;
color: #0a0a0a;
height: 100%;
padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span {
color: white; }
#conversejs .button-group,
#conversejs .input-button-group {
display: table; }
#conversejs .button-group {
width: 100%; }
#conversejs .input-button-group button,
#conversejs .input-button-group input {
display: table-cell; }
#conversejs #minimized-chats {
color: white;
display: none;
height: 100%;
padding: 0;
width: 130px; }
#conversejs #minimized-chats #toggle-minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: ivory;
position: relative;
padding: 10px 0 0 0;
display: block;
width: 100%;
height: 100%;
text-align: center; }
#conversejs #minimized-chats .unread-message-count,
#conversejs #minimized-chats .chat-head-message-count {
font-weight: bold;
background-color: #f6f6f6;
background-image: -webkit-linear-gradient(#f6f6f6 5%, #808080 100%);
background-image: linear-gradient(#f6f6f6 5%, #808080 100%);
border: 1px solid;
text-shadow: 1px 1px 0 #FAFAFA;
color: #681F2C;
border-radius: 5px;
padding: 2px 4px;
font-size: 16px;
text-align: center;
position: absolute;
right: 116px;
bottom: 10px; }
#conversejs #minimized-chats .box-flyout {
position: absolute;
display: block;
height: auto;
bottom: 35px;
margin-left: 0; }
#conversejs #minimized-chats .box-flyout .chat-head {
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
margin: 0 0 1px 0;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 24px;
width: 130px; }
#conversejs .chat-body {
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px);
border-top: 0; }
#conversejs .chat-body p {
font-size: 14px;
color: #6C4C44;
padding: 5px;
margin: 0; }
#conversejs .tt-highlight {
background-color: #00230F; }
#conversejs .tt-suggestion p {
color: white;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
cursor: pointer;
font-size: 11px; }
#conversejs .tt-suggestion p:hover {
background-color: #00230F; }
#conversejs .tt-suggestion p:hover .tt-highlight {
background-color: #00230F;
background: #27774A; }
#conversejs .tt-dropdown-menu {
margin: 0 1px 0 1px;
width: 96px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: #27774A;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
#conversejs .chat-blink {
background-color: #176679;
border-right: 1px solid #176679;
border-left: 1px solid #176679; }
#conversejs .chat-content {
position: relative;
padding: 8px;
font-size: 13px;
color: #6C4C44;
overflow-y: auto;
border: 0;
background-color: #ffffff;
line-height: 1.3em;
height: 206px;
height: calc(100% - 84px); }
#conversejs .chat-info {
color: #6C4C44; }
#conversejs .chat-error {
color: #681F2C;
font-weight: bold; }
#conversejs .chat-error,
#conversejs .chat-info,
#conversejs .chat-message {
padding: 2px 0; }
#conversejs .chat-message-room,
#conversejs .chat-message-them,
#conversejs .chat-message-me {
font-weight: bold;
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
float: left;
padding-right: 3px; }
#conversejs .chat-message-content {
word-wrap: break-word; }
#conversejs .chat-message-room,
#conversejs .chat-message-them {
color: #4B7003; }
#conversejs .chat-message-me {
color: #436F64; }
#conversejs .chat-event,
#conversejs .chat-date,
#conversejs .chat-info {
color: #808080; }
#conversejs li.chat-info {
padding-left: 10px; }
#conversejs .chat-date {
display: inline-block;
padding-top: 10px; }
#conversejs .not-implemented {
margin-top: 3em;
margin-left: 0.3em;
color: #808080; }
#conversejs .mentioned {
font-weight: bold; }
#conversejs .delayed .chat-message-them {
color: #FB5D50; }
#conversejs .delayed .chat-message-me {
color: #7EABBB; }
#conversejs .error {
color: red; }
#conversejs input.error {
border: 1px solid red; }
#conversejs #converse-register .form-errors {
color: red;
display: none; }
#conversejs #converse-register .provider-title {
font-size: 115%; }
#conversejs #converse-register .provider-score {
width: 178px;
margin-bottom: 8px; }
#conversejs #converse-register .form-help .url {
font-weight: bold;
color: #436F64; }
#conversejs .reg-feedback {
font-size: 85%; }
#conversejs .reg-feedback,
#conversejs #converse-login .conn-feedback {
display: block;
text-align: center;
width: 100%; }
#conversejs .chat-message-error {
color: #76797C;
font-size: 90%;
font-weight: normal; }
#conversejs a.restore-chat,
#conversejs .chat-title {
padding: 1px 0 1px 5px;
color: white;
font-weight: bold;
line-height: 15px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0; }
#conversejs a.restore-chat:visited {
color: white; }
#conversejs .chat-title a {
color: white;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap; }
#conversejs .chat-head-chatbox,
#conversejs .chat-head-chatroom {
height: 44px;
position: relative;
padding: 5px; }
#conversejs .chat-head-chatroom {
background-color: #0F592F; }
#conversejs .chat-head-chatbox {
background-color: #436F64; }
#conversejs .user-custom-message,
#conversejs .chatroom-topic {
color: white;
font-size: 80%;
font-style: italic;
height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 1px 0 1px 5px; }
#conversejs .activated {
display: block !important; }
#conversejs a.subscribe-to-user {
padding-left: 2em;
font-weight: bold; }
#conversejs dl.add-converse-contact {
margin: 0 0.5em 0.5em 0.5em; }
#conversejs .fancy-dropdown {
border: 1px solid #F1DCD6;
height: 25px;
text-align: left; }
#conversejs .fancy-dropdown .choose-xmpp-status {
width: 155px; }
#conversejs .fancy-dropdown .choose-xmpp-status span {
padding-right: 5px;
padding-left: 5px;
float: left; }
#conversejs .fancy-dropdown .choose-xmpp-status,
#conversejs .fancy-dropdown .toggle-xmpp-contact-form {
text-shadow: 0 1px 0 #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline; }
#conversejs .fancy-dropdown .toggle-xmpp-contact-form span {
float: left; }
#conversejs #fancy-xmpp-status-select a.change-xmpp-status-message {
float: right;
clear: right;
height: 22px;
width: 12px;
margin: 0px 5px 0 0;
color: #436F64; }
#conversejs ul#found-users {
padding: 10px 0 5px 5px;
border: 0; }
#conversejs form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
padding: 0 0 5px 5px; }
#conversejs form.search-xmpp-contact input {
width: 8em; }
#conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button,
#conversejs a.close-chatbox-button {
border-radius: 6px;
border: 1px solid #888;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: 10px;
margin: 0 0 0 3px;
padding: 3px 3px 2px 3px;
text-decoration: none; }
#conversejs a.configure-chatroom-button:active,
#conversejs a.toggle-chatbox-button:active,
#conversejs a.close-chatbox-button:active {
position: relative;
top: 1px; }
#conversejs .chatroom-form-container {
height: 100%;
color: #6C4C44;
overflow-y: auto;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
#conversejs .chatroom-form {
padding: 1em; }
#conversejs .chatroom-form .instructions {
color: gray;
font-size: 95%; }
#conversejs .chatroom-form input {
width: 100%;
padding: 5px;
text-align: center; }
#conversejs .chatroom-form legend {
font-size: 16px;
font-weight: bold;
margin: 10px 0 15px 0; }
#conversejs .chatroom-form label {
height: 30px;
font-weight: bold;
display: block;
clear: both; }
#conversejs .chatroom-form label label input, #conversejs .chatroom-form label label select {
float: right; }
#conversejs .requesting-xmpp-contact .request-actions {
margin-left: 0.5em;
float: right; }
#conversejs #converse-roster {
text-align: left;
width: 100%;
position: relative;
margin: 0.5em 0 0 0;
height: 194px;
height: calc(100% - 68px);
overflow: hidden;
/* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .filter-type {
display: table-cell;
float: right;
font-size: 14px;
height: 25px;
margin: 0 0 0.5em -1px;
padding: 0;
width: 84px; }
#conversejs #converse-roster .roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
font-size: 14px;
height: 25px;
margin: 0 0 0.5em 7px;
padding: 0;
padding: 2px;
width: 103px; }
#conversejs #converse-roster .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-contacts {
margin: 0;
max-height: 195px;
max-height: calc(100% - 26px);
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 15px; }
#conversejs #converse-roster .group-toggle {
color: #6C4C44;
display: block;
width: 100%; }
#conversejs #converse-roster dt {
display: none; }
#conversejs #converse-roster dd {
line-height: 16px;
padding: 4px 2px 0 4px;
height: 24px; }
#conversejs #converse-roster dd a, #conversejs #converse-roster dd span {
text-shadow: 0 1px 0 #FAFAFA;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 3px; }
#conversejs #converse-roster dd span {
padding: 0 5px 0 0; }
#conversejs #converse-roster dd a.decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster dd a.remove-xmpp-contact {
float: right;
width: 22px;
margin: 0;
display: none;
color: #6C4C44; }
#conversejs #converse-roster dd:hover a.remove-xmpp-contact {
display: inline-block; }
#conversejs #converse-roster dd.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster dd.current-xmpp-contact span {
font-size: 16px;
float: left;
color: #436F64; }
#conversejs #converse-roster dd a.open-chat {
width: 80%; }
#conversejs #converse-roster span.pending-contact-name {
width: 80%; }
#conversejs #converse-roster span.req-contact-name {
width: 69%;
padding: 0; }
#conversejs #available-chatrooms {
text-align: left; }
#conversejs #available-chatrooms dt,
#conversejs #converse-roster dt {
font-weight: normal;
color: #6C4C44;
border: none;
padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs .room-info {
font-size: 11px;
font-style: normal;
font-weight: normal; }
#conversejs li.room-info {
display: block;
margin-left: 5px; }
#conversejs div.room-info {
clear: left; }
#conversejs p.room-info {
margin: 0;
padding: 0;
display: block;
white-space: normal; }
#conversejs a.room-info {
width: 15px;
display: none;
clear: right; }
#conversejs a.open-room {
float: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden; }
#conversejs dd.available-chatroom {
display: inline-block;
overflow-x: hidden;
text-overflow: ellipsis;
padding: 0.25em 0.5em;
white-space: nowrap; }
#conversejs dd.available-chatroom a.open-room {
width: 150px; }
#conversejs dd.available-chatroom:hover a.room-info {
display: inline-block;
font-size: 14px; }
#conversejs dd.available-chatroom,
#conversejs #converse-roster dd {
font-weight: bold;
border: none;
display: block;
color: #6C4C44;
text-shadow: 0 1px 0 #FAFAFA;
clear: both;
overflow-y: hidden; }
#conversejs .roster-group:hover,
#conversejs dd.available-chatroom:hover,
#conversejs #converse-roster dd:hover {
background-color: #E3C9C1; }
#conversejs .chatbox,
#conversejs .chatroom {
height: 35px;
float: right;
margin: 0 7px;
display: block; }
@media screen and (max-width: 480px) {
#conversejs .chatbox,
#conversejs .chatroom {
margin: 0; } }
#conversejs .chatbox {
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox {
width: 100%; } }
#conversejs .chatbox .box-flyout {
z-index: 1;
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox .box-flyout {
width: 100%; } }
#conversejs .chatbox .dropdown a {
width: 148px;
display: inline-block;
line-height: 25px; }
#conversejs .chatbox .dropdown li {
list-style: none;
padding-left: 0; }
#conversejs .chatbox .dropdown dd ul {
padding: 0;
list-style: none;
position: absolute;
left: 0;
top: 0;
border: 1px solid #F1DCD6;
width: 100%;
z-index: 21;
background-color: #F1E2DD; }
#conversejs .chatbox .dropdown dd ul li:hover {
background-color: #E3C9C1; }
#conversejs .chatbox .dropdown dd.search-xmpp ul {
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs .chatbox .dropdown dd.search-xmpp ul li:hover {
background-color: #F1E2DD; }
#conversejs .chatbox .dropdown dt a span {
cursor: pointer;
display: block;
padding: 4px 7px 0 5px; }
#conversejs .chatroom {
width: 300px; }
#conversejs .chatroom .box-flyout {
width: 300px; }
@media screen and (max-width: 480px) {
#conversejs .chatroom {
width: 100%; }
#conversejs .chatroom .box-flyout {
width: 100%; } }
#conversejs .chatroom label {
margin-left: 2px;
font-size: 12px; }
#conversejs .chatroom .participant-list {
list-style: none; }
#conversejs .chatroom .participant-list li {
cursor: default;
display: block;
font-size: 12px;
font-weight: bold;
overflow: hidden;
padding: 2px 5px;
text-overflow: ellipsis;
white-space: nowrap; }
#conversejs .chatroom .participant-list li.moderator {
color: #8f2831; }
#conversejs .chatroom .participant-list li.visitor {
color: #A3A3A3; }
#conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0; }
#conversejs .chatroom .chat-area {
float: left;
height: 100%;
width: 200px; }
#conversejs .chatroom .invited-contact {
margin: -1px 0 0 -1px;
width: 100px;
border: 1px solid #999; }
#conversejs .chatroom .invited-contact.tt-input {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
#conversejs .chatroom .participants {
float: right;
background-color: white;
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid #AAA;
border-bottom-right-radius: 4px;
width: 100px;
height: 100%; }
#conversejs .chatroom .participants label {
font-size: 12px;
font-style: italic;
margin: 5px;
display: block; }
#conversejs .chatroom-form,
#conversejs .controlbox-pane {
background-color: white;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
font-size: 14px;
overflow-y: auto;
position: absolute;
text-align: center;
width: 100%;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); }
#conversejs .controlbox-pane {
padding: 5px 0;
overflow-y: hidden; }
#conversejs .controlbox-pane dd {
margin-left: 0;
margin-bottom: 0; }
#conversejs .controlbox-pane dd.odd {
background-color: #DCEAC5; }
#conversejs #converse-register .title {
font-weight: bold; }
#conversejs #converse-register .info {
font-style: italic;
color: green;
font-size: 85%;
margin: 5px 0; }
#conversejs .form-help,
#conversejs #converse-register .instructions {
color: gray;
font-size: 85%; }
#conversejs .form-help:hover,
#conversejs #converse-register .instructions:hover {
color: #6C4C44; }
#conversejs .form-help {
padding-top: 5px; }
#conversejs #converse-register,
#conversejs #converse-login {
background: white;
padding: 1em; }
#conversejs #converse-register input,
#conversejs #converse-login input {
width: 100%;
height: 30px;
margin: 5px 0 10px 0;
padding-left: 0.5em; }
#conversejs #converse-register .input-group {
display: table;
margin: auto;
width: 178px; }
#conversejs #converse-register .input-group span, #conversejs #converse-register .input-group input[name=username] {
display: table-cell; }
#conversejs #converse-register .input-group input[name=username] {
width: 100%; }
#conversejs .cancel-submit, #conversejs .save-submit {
width: 45%;
margin: 5px 3px 5px 3px; }
#conversejs .cancel, #conversejs .cancel-submit {
color: #681F2C; }
#conversejs .save-submit {
color: #436F64; }
#conversejs .chatroom-form label,
#conversejs .controlbox-pane label,
#conversejs #converse-register label,
#conversejs #converse-login label {
font-size: 14px;
font-weight: bold;
height: auto;
margin: 4px; }
#conversejs #converse-register .login-submit,
#conversejs #converse-login .login-submit,
#conversejs #converse-register .submit,
#conversejs #converse-login .submit {
height: 30px;
padding: 0px;
font-size: 14px; }
#conversejs #converse-login .submit {
margin: 1em 0; }
#conversejs form.add-chatroom {
background: none;
padding: 0.5em; }
#conversejs form.add-chatroom input[type=button],
#conversejs form.add-chatroom input[type=submit],
#conversejs form.add-chatroom input[type=text] {
margin: 0;
width: 100%;
padding: 0.25em; }
#conversejs form.add-chatroom span.spinner,
#conversejs form.add-chatroom input[type=button],
#conversejs form.add-chatroom input[type=submit] {
margin-top: 0.5em;
display: table-cell;
width: auto; }
#conversejs form.add-chatroom input[type=submit] {
color: #436F64; }
#conversejs select#select-xmpp-status {
float: right;
margin-right: 0.5em; }
#conversejs .chat-head {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #ffffff;
font-size: 100%;
margin: 0;
padding: 6px; }
#conversejs .chat-head.controlbox-head {
background-color: #436F64;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
height: 44px;
margin: 0;
padding: 6px 6px 6px 0; }
#conversejs .chat-head .avatar {
float: left; }
#conversejs .chat-head #controlbox-tabs {
text-align: center;
display: inline;
overflow: hidden;
font-size: 12px;
list-style-type: none;
/* single tab */ }
#conversejs .chat-head #controlbox-tabs a.current,
#conversejs .chat-head #controlbox-tabs a.current:hover {
box-shadow: none;
border-bottom: 0;
height: 44px;
cursor: default;
color: #6C4C44; }
#conversejs .chat-head #controlbox-tabs li {
float: left;
list-style: none;
padding-left: 0;
text-shadow: white 0 1px 0;
width: 38%; }
#conversejs .chat-head #controlbox-tabs li a {
background-color: white;
border-bottom: 1px solid #CCC;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
color: #888;
display: block;
font-size: 12px;
height: 43px;
line-height: 43px;
margin: 0;
text-align: center;
text-decoration: none; }
#conversejs .chat-head #controlbox-tabs li a:hover {
color: #6C4C44; }
#conversejs div#chatrooms {
overflow-y: auto; }
#conversejs form.sendXMPPMessage {
-moz-background-clip: padding;
-moz-border-radius: 4px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
background-clip: padding-box;
background: white;
border-radius: 4px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 1px solid #BBB;
border: 0;
margin: 0;
padding: 0;
position: relative;
height: 82px;
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs form.sendXMPPMessage {
width: 100%; } }
#conversejs form.sendXMPPMessage .chat-textarea {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
height: 62px;
padding: 0.5em;
width: 100%;
resize: none; }
#conversejs .chat-toolbar {
font-size: 14px;
margin: 0;
padding: 0 4px;
height: 20px;
display: block; }
#conversejs .chat-toolbar a {
color: #436F64; }
#conversejs .chat-toolbar .unencrypted a,
#conversejs .chat-toolbar .unencrypted {
color: #8f2831; }
#conversejs .chat-toolbar .unverified a,
#conversejs .chat-toolbar .unverified {
color: #cf5300; }
#conversejs .chat-toolbar .private a,
#conversejs .chat-toolbar .private {
color: #4b7003; }
#conversejs .chat-toolbar .toggle-participants,
#conversejs .chat-toolbar .toggle-clear,
#conversejs .chat-toolbar .toggle-otr {
float: right; }
#conversejs .chat-toolbar li {
display: inline-block;
list-style: none;
padding: 0 3px 0 3px;
cursor: pointer;
margin-top: 1px; }
#conversejs .chat-toolbar li:hover {
cursor: pointer; }
#conversejs .chat-toolbar ul {
background: #fff;
bottom: 100%;
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
display: none;
font-size: 12px;
margin: 0 0 1px 0;
position: absolute;
right: 0; }
#conversejs .chat-toolbar ul li {
cursor: pointer;
list-style: none;
position: relative; }
#conversejs .chat-toolbar ul li a:hover {
color: #8f2831; }
#conversejs .chat-toolbar .toggle-smiley {
padding-left: 5px; }
#conversejs .chat-toolbar .toggle-smiley ul li {
font-size: 14px;
padding: 5px;
z-index: 98; }
#conversejs .chat-toolbar .toggle-smiley ul li:hover {
background-color: #E3C9C1; }
#conversejs .chat-toolbar .toggle-otr ul li {
background-color: white;
display: block;
z-index: 99; }
#conversejs .chat-toolbar .toggle-otr ul li a {
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
display: block;
padding: 1px;
text-decoration: none; }
#conversejs .chat-toolbar-text {
font-size: 12px;
padding-right: 3px; }
#conversejs #set-custom-xmpp-status {
float: left;
padding: 0; }
#conversejs #set-custom-xmpp-status input {
height: 26px;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
padding: 0 0 0 0.5em; }
#conversejs #set-custom-xmpp-status button {
height: 26px;
width: 40px;
padding: 1px; }
#conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin: 0; }
#conversejs .chat-textarea-chatroom-selected {
border: 2px solid #436F64;
margin: 0; }
#conversejs #controlbox {
display: none; }
#conversejs #controlbox div.xmpp-status {
display: inline; }
#conversejs .chatbox .dropdown {
background-color: #F1E2DD; }
#conversejs .chatbox .dropdown dd {
position: relative; }
#conversejs .chatbox .dropdown dd,
#conversejs .dropdown dt,
#conversejs .dropdown ul {
margin: 0;
padding: 0; }
#conversejs .add-xmpp-contact {
background: none;
padding: 5px; }
#conversejs .add-xmpp-contact input {
margin: 0 0 1rem;
width: 100%; }
#conversejs .add-xmpp-contact button {
width: 100%; }
#conversejs .xmpp-status-menu {
text-align: left;
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs .xmpp-status-menu li {
padding: 2px; }
#conversejs .xmpp-status-menu li a {
width: 100%;
padding: 0 8px; }
#conversejs .xmpp-status-menu li a.logout,
#conversejs .xmpp-status-menu li a.logout span {
color: #681F2C; }
#conversejs .set-xmpp-status {
background: none;
padding: 0.5em; }
#conversejs .set-xmpp-status .dropdown dd ul {
z-index: 22; }
#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
border-radius: 4px;
bottom: 6px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
height: 400px;
position: absolute; }
@media screen and (max-width: 480px) {
#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
height: 400px; } }
#conversejs .minimized-chats-flyout {
border-radius: 4px;
bottom: 35px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
position: absolute;
height: auto;
width: 130px; }
#conversejs .minimized-chats-flyout .chat-head-chatroom,
#conversejs .minimized-chats-flyout .chat-head {
border-radius: 4px;
width: 130px;
height: 35px;
margin-bottom: 1px; }
#conversejs .minimized-chats-flyout.minimized {
height: auto; }
#conversejs .dragresize {
position: absolute;
width: 200px;
height: 5px;
background: transparent;
border: 0;
top: 0;
margin-left: 0;
cursor: n-resize;
z-index: 20; }
Reference in New Issue View Git Blame Copy Permalink