Added a new color scheme.
This commit is contained in:
parent
aaa8ea36ee
commit
f37fadc318
@ -5,7 +5,11 @@
|
||||
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
|
||||
* Licensed under the Mozilla Public License
|
||||
*/
|
||||
/* https://coolors.co/app/818479-b5cbb7-d2e4c4-e4e9b2-e7e08b */
|
||||
/*
|
||||
Color scheme helpers:
|
||||
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
|
||||
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Converse-js';
|
||||
src: url("../fonticons/fonts/icomoon.eot?-mnoxh0");
|
||||
@ -1033,7 +1037,7 @@
|
||||
margin: 0; }
|
||||
#conversejs a, #conversejs a:visited {
|
||||
text-decoration: none;
|
||||
color: #436F64;
|
||||
color: #2A9D8F;
|
||||
text-shadow: none; }
|
||||
|
||||
#conversejs {
|
||||
@ -1154,13 +1158,11 @@
|
||||
#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; }
|
||||
white-space: nowrap; }
|
||||
#conversejs a.restore-chat:visited {
|
||||
color: white; }
|
||||
#conversejs .user-custom-message,
|
||||
@ -1178,6 +1180,12 @@
|
||||
display: block !important; }
|
||||
#conversejs .pure-button {
|
||||
border-radius: 4px; }
|
||||
#conversejs .button-success {
|
||||
color: white;
|
||||
background-color: #2AC611; }
|
||||
#conversejs .button-warn {
|
||||
color: white;
|
||||
background-color: #D24E2B; }
|
||||
#conversejs form.pure-form.converse-form {
|
||||
background: white;
|
||||
margin: 1em; }
|
||||
@ -1208,7 +1216,7 @@
|
||||
border: 1px solid #578308;
|
||||
margin: 0; }
|
||||
#conversejs .chat-textarea-chatroom-selected {
|
||||
border: 2px solid #436F64;
|
||||
border: 2px solid #2A9D8F;
|
||||
margin: 0; }
|
||||
#conversejs .dropdown dt,
|
||||
#conversejs .dropdown ul {
|
||||
@ -1232,10 +1240,10 @@
|
||||
#conversejs .chat-head .avatar {
|
||||
float: left; }
|
||||
#conversejs .chat-head.chat-head-chatbox {
|
||||
background-color: #436F64; }
|
||||
background-color: #F4A261; }
|
||||
#conversejs .chatbox-btn {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #888;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
@ -1290,13 +1298,13 @@
|
||||
margin: 0;
|
||||
padding: 5px; }
|
||||
#conversejs .chatbox .chat-body .chat-info {
|
||||
color: #818479;
|
||||
color: #808080;
|
||||
color: #D24E2B;
|
||||
margin: 0.3em; }
|
||||
#conversejs .chatbox .chat-body .chat-info.chat-event {
|
||||
clear: left; }
|
||||
clear: left;
|
||||
font-style: italic; }
|
||||
#conversejs .chatbox .chat-body .chat-info.chat-error {
|
||||
color: #681F2C;
|
||||
color: #D24E2B;
|
||||
font-weight: bold; }
|
||||
#conversejs .chatbox .chat-body .chat-info.chat-date {
|
||||
display: inline-block;
|
||||
@ -1313,9 +1321,9 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden; }
|
||||
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
|
||||
color: #346121; }
|
||||
color: #1A9707; }
|
||||
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
|
||||
color: #436F64; }
|
||||
color: #2A9D8F; }
|
||||
#conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
|
||||
max-width: 100%;
|
||||
word-wrap: break-word; }
|
||||
@ -1336,7 +1344,7 @@
|
||||
height: calc(100% - 96px); }
|
||||
#conversejs .chatbox .dropdown {
|
||||
/* status dropdown styles */
|
||||
background-color: beige; }
|
||||
background-color: #FCFDFD; }
|
||||
#conversejs .chatbox .dropdown dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -1372,16 +1380,16 @@
|
||||
padding: 5px;
|
||||
height: 25px;
|
||||
display: block;
|
||||
background-color: beige; }
|
||||
background-color: #FFF5EE; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
|
||||
color: #436F64; }
|
||||
color: #2A9D8F; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
|
||||
font-size: 12px;
|
||||
padding-right: 3px;
|
||||
text-shadow: 0 1px 0 white; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
|
||||
color: #8f2831; }
|
||||
color: #D24E2B; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
|
||||
color: #cf5300; }
|
||||
@ -1416,7 +1424,7 @@
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
|
||||
color: #8f2831; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
|
||||
color: #436F64;
|
||||
color: #2A9D8F;
|
||||
padding-left: 5px; }
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
|
||||
font-size: 14px;
|
||||
@ -1464,7 +1472,7 @@
|
||||
#conversejs #controlbox {
|
||||
display: none; }
|
||||
#conversejs #controlbox .controlbox-head {
|
||||
background-color: #436F64;
|
||||
background-color: #577BDD;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
color: white;
|
||||
@ -1499,7 +1507,7 @@
|
||||
margin-bottom: 8px; }
|
||||
#conversejs #controlbox #converse-register .form-help .url {
|
||||
font-weight: bold;
|
||||
color: #436F64; }
|
||||
color: #2A9D8F; }
|
||||
#conversejs #controlbox #converse-register .input-group {
|
||||
display: table;
|
||||
margin: auto;
|
||||
@ -1525,7 +1533,7 @@
|
||||
width: 45%;
|
||||
margin: 5px 3px 5px 3px; }
|
||||
#conversejs #controlbox #converse-register .cancel, #conversejs #controlbox #converse-register .cancel-submit, #conversejs #controlbox #converse-login .cancel, #conversejs #controlbox #converse-login .cancel-submit {
|
||||
color: #681F2C; }
|
||||
color: #D24E2B; }
|
||||
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
|
||||
color: #436F64; }
|
||||
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
|
||||
@ -1537,8 +1545,6 @@
|
||||
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
|
||||
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
|
||||
width: 100%; }
|
||||
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
|
||||
color: #436F64; }
|
||||
#conversejs #controlbox #chatrooms #available-chatrooms {
|
||||
padding: 0 1em 2em 1em;
|
||||
text-align: left; }
|
||||
@ -1603,16 +1609,16 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 1px solid #E5E9E8;
|
||||
border: 1px solid #B1BFC4;
|
||||
width: 100%;
|
||||
z-index: 21;
|
||||
background-color: beige; }
|
||||
background-color: #FCFDFD; }
|
||||
#conversejs #controlbox .dropdown dd ul li:hover {
|
||||
background-color: #E1E6E5; }
|
||||
#conversejs #controlbox .dropdown dd.search-xmpp ul {
|
||||
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
|
||||
#conversejs #controlbox .dropdown dd.search-xmpp ul li:hover {
|
||||
background-color: beige; }
|
||||
background-color: #FCFDFD; }
|
||||
#conversejs #controlbox .dropdown dt a span {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
@ -1670,7 +1676,7 @@
|
||||
#conversejs #controlbox .xmpp-status {
|
||||
display: inline; }
|
||||
#conversejs #controlbox .fancy-dropdown {
|
||||
border: 1px solid #E5E9E8;
|
||||
border: 1px solid #B1BFC4;
|
||||
height: 25px;
|
||||
text-align: left; }
|
||||
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status {
|
||||
@ -1694,7 +1700,7 @@
|
||||
height: 22px;
|
||||
width: 12px;
|
||||
margin: 0px 5px 0 0;
|
||||
color: #436F64; }
|
||||
color: #2A9D8F; }
|
||||
#conversejs #controlbox .controlbox-pane {
|
||||
background-color: white;
|
||||
border-bottom-left-radius: 4px;
|
||||
@ -1737,14 +1743,14 @@
|
||||
padding: 0 8px; }
|
||||
#conversejs #controlbox .xmpp-status-menu li a.logout,
|
||||
#conversejs #controlbox .xmpp-status-menu li a.logout span {
|
||||
color: #681F2C; }
|
||||
color: #D24E2B; }
|
||||
#conversejs #controlbox .set-xmpp-status {
|
||||
background: none;
|
||||
padding: 0.75em 0.5em 0.5em 0.5em; }
|
||||
#conversejs #controlbox .set-xmpp-status .dropdown dd ul {
|
||||
z-index: 22; }
|
||||
#conversejs .toggle-controlbox {
|
||||
background-color: #436F64;
|
||||
background-color: #2A9D8F;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
color: #0a0a0a;
|
||||
@ -1818,7 +1824,6 @@
|
||||
clear: both;
|
||||
color: #818479;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
height: 24px;
|
||||
line-height: 16px;
|
||||
overflow-y: hidden;
|
||||
@ -1834,7 +1839,7 @@
|
||||
#conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
color: #436F64; }
|
||||
color: #2A9D8F; }
|
||||
#conversejs #converse-roster .roster-contacts dd.odd {
|
||||
background-color: #DCEAC5;
|
||||
/* Make this difference */ }
|
||||
@ -1864,7 +1869,7 @@
|
||||
padding: 0; }
|
||||
|
||||
#conversejs .chat-head-chatroom {
|
||||
background-color: #346121; }
|
||||
background-color: #E76F51; }
|
||||
#conversejs .chatroom {
|
||||
width: 300px; }
|
||||
@media screen and (max-width: 480px) {
|
||||
@ -1897,7 +1902,7 @@
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
|
||||
font-weight: bold; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
|
||||
color: #346121; }
|
||||
color: #1A9707; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
@ -1910,20 +1915,22 @@
|
||||
height: 100%; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants.hidden {
|
||||
display: none; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants .participants-heading {
|
||||
padding: 0.3em;
|
||||
font-weight: bold; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list {
|
||||
list-style: none; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li {
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
padding: 2px 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100px; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator {
|
||||
color: #8f2831; }
|
||||
color: #D24E2B; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
|
||||
background-color: white;
|
||||
border-bottom-left-radius: 4px;
|
||||
@ -1959,7 +1966,7 @@
|
||||
#conversejs #minimized-chats #toggle-minimized-chats {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background-color: #436F64;
|
||||
background-color: #2A9D8F;
|
||||
color: white;
|
||||
position: relative;
|
||||
padding: 10px 0 0 0;
|
||||
@ -1982,12 +1989,10 @@
|
||||
#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%);
|
||||
background-color: white;
|
||||
border: 1px solid;
|
||||
text-shadow: 1px 1px 0 #FAFAFA;
|
||||
color: #681F2C;
|
||||
color: #D24E2B;
|
||||
border-radius: 5px;
|
||||
padding: 2px 4px;
|
||||
font-size: 16px;
|
||||
|
@ -44,7 +44,7 @@
|
||||
<input type="text" name="jid" placeholder="user@server">
|
||||
<label>Password:</label>
|
||||
<input type="password" name="password" placeholder="password">
|
||||
<input class="pure-button submit" type="submit" value="Log In">
|
||||
<input class="pure-button button-success" type="submit" value="Log In">
|
||||
<span class="conn-feedback"></span>
|
||||
</form>
|
||||
</div>
|
||||
@ -252,7 +252,7 @@
|
||||
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
|
||||
<label>Nickname</label>
|
||||
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
|
||||
<input type="submit" class="pure-button left" name="join" value="Open Room">
|
||||
<input type="submit" class="pure-button button-success" name="join" value="Open Room">
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
@ -261,7 +261,7 @@
|
||||
<p class="form-help">Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted. </p>
|
||||
-->
|
||||
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
|
||||
<input type="button" class="pure-button right" name="show" id="show-rooms" value="Show rooms">
|
||||
<input type="button" class="pure-button button-success" name="show" id="show-rooms" value="Show rooms">
|
||||
</fieldset>
|
||||
</form>
|
||||
<dl id="available-chatrooms">
|
||||
|
@ -25,6 +25,222 @@
|
||||
<span style="display: none" id="online-count">(0)</span>
|
||||
</a>
|
||||
|
||||
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="dragresize dragresize-top"></div>
|
||||
<div class="dragresize dragresize-topleft"></div>
|
||||
<div class="dragresize dragresize-left"></div>
|
||||
<div class="chat-head controlbox-head">
|
||||
<ul id="controlbox-tabs">
|
||||
<li><a class="s current" href="#users">Contacts</a></li>
|
||||
<li><a class="s" href="#chatrooms">Rooms</a></li>
|
||||
</ul>
|
||||
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
Add a contact
|
||||
</a>
|
||||
</dt>
|
||||
<dd class="search-xmpp" style="display:none">
|
||||
<ul>
|
||||
<li>
|
||||
<form class="add-xmpp-contact">
|
||||
<input type="text" name="identifier" class="username" placeholder="Contact username">
|
||||
<button type="submit">Add</button>
|
||||
</form>
|
||||
</li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
<div id="converse-roster">
|
||||
<span class="input-button-group">
|
||||
<input class="roster-filter" placeholder="Type to filter">
|
||||
<select class="filter-type">
|
||||
<option value="contacts">Contacts</option>
|
||||
<option value="groups">Groups</option>
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
</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="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
Victor Matfield
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="away current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-away" title="this contact is away"></span>
|
||||
William Winterbottom
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="dnd current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-dnd" title="This contact is busy"></span>
|
||||
Gary Teichmann
|
||||
</a>
|
||||
<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>
|
||||
</dt>
|
||||
<dd class="away current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-away" title="this contact is away"></span>
|
||||
Allan Donald
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="offline current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-offline" title="This contact is offline"></span>
|
||||
Corné Krige
|
||||
</a>
|
||||
<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>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
John Smit
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
Bakkies Botha
|
||||
</a>
|
||||
<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>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
James Small
|
||||
</a>
|
||||
<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>
|
||||
</dt>
|
||||
<dd class="offline requesting-xmpp-contact">
|
||||
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
|
||||
<span class="request-actions">
|
||||
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
||||
</span>
|
||||
</dd>
|
||||
<dd class="offline requesting-xmpp-contact">
|
||||
<span class="req-contact-name">André Vos</span>
|
||||
<span class="request-actions">
|
||||
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
<dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
|
||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
|
||||
</dt>
|
||||
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chatrooms" class="controlbox-pane" style="">
|
||||
<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
|
||||
<fieldset>
|
||||
<legend>Join an existing room or create a new one</legend>
|
||||
<label>Room name</label>
|
||||
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
|
||||
<label>Nickname</label>
|
||||
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
|
||||
<input type="submit" class="pure-button button-success" name="join" value="Open Room">
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label>Server</label>
|
||||
<!-- TODO: this must be a tooltip
|
||||
<p class="form-help">Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted. </p>
|
||||
-->
|
||||
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
|
||||
<input type="button" class="pure-button button-success" name="show" id="show-rooms" value="Show rooms">
|
||||
</fieldset>
|
||||
</form>
|
||||
<dl id="available-chatrooms">
|
||||
<dt>Rooms on conference.myserver.com</dt>
|
||||
<dd class="available-chatroom">
|
||||
<a class="open-room" data-room-jid="eee@conference.opkode.com" title="Click to open this room" href="#">Current Events</a>
|
||||
<a class="room-info icon-room-info" data-room-jid="eee@conference.opkode.com" title="Show more information on this room" href="#"> </a>
|
||||
</dd>
|
||||
<dd class="available-chatroom">
|
||||
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development</a>
|
||||
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#"> </a>
|
||||
</dd>
|
||||
</dl>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="dragresize dragresize-top"></div>
|
||||
@ -171,10 +387,10 @@
|
||||
</form>
|
||||
</div>
|
||||
<div class="participants">
|
||||
<form class="room-invite">
|
||||
<form class="pure-form room-invite">
|
||||
<span class="twitter-typeahead" style="position: relative; display: inline-block; direction: ltr;"><input class="invited-contact tt-hint" type="text" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1;"><input class="invited-contact tt-input" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre><span class="tt-dropdown-menu" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;"><div class="tt-dataset-contacts-dataset"></div></span></span>
|
||||
</form>
|
||||
<label>Occupants:</label>
|
||||
<p class="participants-heading">Occupants:</strong>
|
||||
<ul class="participant-list">
|
||||
<li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant" title="This user can send messages in this room">jabber the hut</li>
|
||||
@ -201,11 +417,12 @@
|
||||
</div>
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="chatroom-form-container">
|
||||
<form class="chatroom-form">
|
||||
<!-- TODO: Make this a long form that scrolls -->
|
||||
<legend>This chatroom requires a password</legend>
|
||||
<label>Password:</label>
|
||||
<input type="password" name="password">
|
||||
<form class="pure-form converse-form chatroom-form">
|
||||
<fieldset>
|
||||
<legend>This chatroom requires a password</legend>
|
||||
<label>Password:</label>
|
||||
<input type="password" name="password">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -23,7 +23,7 @@
|
||||
}
|
||||
.chatbox-btn {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #888;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
@ -84,11 +84,11 @@
|
||||
padding: 5px;
|
||||
}
|
||||
.chat-info {
|
||||
color: $text-color;
|
||||
color: #808080;
|
||||
color: $warning-color;
|
||||
margin: 0.3em;
|
||||
&.chat-event {
|
||||
clear: left;
|
||||
font-style: italic;
|
||||
}
|
||||
&.chat-error {
|
||||
color: $warning-color;
|
||||
@ -183,7 +183,7 @@
|
||||
padding: 5px;
|
||||
height: $toolbar-height;
|
||||
display: block;
|
||||
background-color: $light-background-color;
|
||||
background-color: $toolbar-color;
|
||||
a {
|
||||
color: $link-color;
|
||||
}
|
||||
@ -194,7 +194,7 @@
|
||||
}
|
||||
.unencrypted a,
|
||||
.unencrypted {
|
||||
color: #8f2831;
|
||||
color: $warning-color;
|
||||
}
|
||||
.unverified a,
|
||||
.unverified {
|
||||
|
@ -53,20 +53,23 @@
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
.participants-heading {
|
||||
padding: 0.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.participant-list {
|
||||
list-style: none;
|
||||
li {
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
padding: 2px 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100px;
|
||||
&.moderator {
|
||||
color: #8f2831;
|
||||
color: $moderator-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -106,9 +106,6 @@
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
input[type=submit] {
|
||||
color: $save-button-color;
|
||||
}
|
||||
}
|
||||
#available-chatrooms {
|
||||
padding: 0 1em 2em 1em;
|
||||
|
@ -130,13 +130,11 @@
|
||||
.chat-title {
|
||||
padding: 1px 0 1px 5px;
|
||||
color: $chat-head-text-color;
|
||||
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;
|
||||
}
|
||||
|
||||
a.restore-chat:visited {
|
||||
@ -163,6 +161,14 @@
|
||||
.pure-button {
|
||||
border-radius: $chatbox-border-radius;
|
||||
}
|
||||
.button-success {
|
||||
color: white;
|
||||
background-color: $success-color;
|
||||
}
|
||||
.button-warn {
|
||||
color: white;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
form {
|
||||
&.pure-form.converse-form {
|
||||
|
@ -43,7 +43,7 @@
|
||||
.unread-message-count,
|
||||
.chat-head-message-count {
|
||||
font-weight: bold;
|
||||
@include linear-gradient(#f6f6f6 5%, #808080 100%);
|
||||
background-color: white;
|
||||
border: 1px solid;
|
||||
text-shadow: 1px 1px 0 $text-shadow-color;
|
||||
color: $warning-color;
|
||||
|
@ -77,7 +77,6 @@
|
||||
clear: both;
|
||||
color: $text-color;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
height: 24px;
|
||||
line-height: 16px;
|
||||
overflow-y: hidden;
|
||||
|
@ -1,30 +1,40 @@
|
||||
/* https://coolors.co/app/818479-b5cbb7-d2e4c4-e4e9b2-e7e08b */
|
||||
|
||||
$link-color: #436F64 !default;
|
||||
/*
|
||||
Color scheme helpers:
|
||||
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
|
||||
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
|
||||
*/
|
||||
$link-color: #2A9D8F !default;
|
||||
$inverse-link-color: white !default;
|
||||
$link-shadow-color: #FAFAFA !default;
|
||||
$text-shadow-color: #FAFAFA !default;
|
||||
$text-color: #818479 !default;
|
||||
$border-color: #CCC !default;
|
||||
$warning-color: #681F2C !default;
|
||||
$light-background-border-color: #E5E9E8 !default;
|
||||
$light-background-color: beige !default;
|
||||
$icon-color: #114327 !default;
|
||||
$highlight-color: #E1E6E5 !default;
|
||||
$controlbox-head-color: #436F64 !default;
|
||||
$chat-head-color: #436F64 !default;
|
||||
$chatroom-head-color: #346121 !default;
|
||||
$chat-head-color: #F4A261 !default;
|
||||
$chatroom-head-color: #E76F51 !default;
|
||||
$chat-head-text-color: white !default;
|
||||
$chat-head-inverse-text-color: white !default;
|
||||
$chat-head-height: 44px !default;
|
||||
$save-button-color: #436F64 !default;
|
||||
$chat-textarea-height: 70px !default;
|
||||
$toolbar-height: 25px !default;
|
||||
$toolbar-color: beige !default;
|
||||
$message-them-color: #346121 !default;
|
||||
$message-them-color: #1A9707 !default;
|
||||
$roster-height: 194px !default;
|
||||
|
||||
$controlbox-head-color: #577BDD !default;
|
||||
$controlbox-dropdown-height: 25px !default;
|
||||
|
||||
$success-color: #2AC611 !default;
|
||||
$warning-color: #D24E2B !default;
|
||||
|
||||
$light-background-border-color: #B1BFC4 !default;
|
||||
$light-background-color: #FCFDFD !default;
|
||||
|
||||
$toolbar-height: 25px !default;
|
||||
$toolbar-color: #FFF5EE !default;
|
||||
|
||||
$moderator-color: #D24E2B !default;
|
||||
|
||||
$chatbox-border-radius: 4px !default;
|
||||
$bottom-gutter-height: 35px !default;
|
||||
$chatbox-hover-height: 6px !default;
|
||||
|
@ -1,8 +1,10 @@
|
||||
<div class="chatroom-form-container">
|
||||
<form class="chatroom-form">
|
||||
<legend>{{heading}}</legend>
|
||||
<label>{{label_password}}</label>
|
||||
<input type="password" name="password"/>
|
||||
<input type="submit" value="{{label_submit}}"/>
|
||||
<form class="pure-form converse-form chatroom-form">
|
||||
<fieldset>
|
||||
<legend>{{heading}}</legend>
|
||||
<label>{{label_password}}</label>
|
||||
<input type="password" name="password"/>
|
||||
<input type="submit" value="{{label_submit}}"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!-- <div class="participants"> -->
|
||||
<form class="room-invite">
|
||||
<form class="pure-form room-invite">
|
||||
<input class="invited-contact" placeholder="{{label_invitation}}" type="text"/>
|
||||
</form>
|
||||
<label>{{label_occupants}}:</label>
|
||||
<p class="participants-heading">{{label_occupants}}:</p>
|
||||
<ul class="participant-list"></ul>
|
||||
<!-- </div> -->
|
||||
|
@ -12,7 +12,7 @@
|
||||
<span class="conn-feedback"></span>
|
||||
{[ } ]}
|
||||
{[ if (authentication == ANONYMOUS) { ]}
|
||||
<input type="pure-button submit" class="submit login-anon" value="{{label_anon_login}}"/>
|
||||
<input type="pure-button button-success" class="submit login-anon" value="{{label_anon_login}}"/>
|
||||
{[ } ]}
|
||||
{[ if (authentication == PREBIND) { ]}
|
||||
<p>Disconnected.</p>
|
||||
|
@ -3,14 +3,14 @@
|
||||
<label>{{label_room_name}}</label>
|
||||
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
|
||||
<label>{{label_nickname}}</label> <input type="text" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
|
||||
<input type="submit" class="pure-button" name="join" value="{{label_join}}"/>
|
||||
<input type="submit" class="pure-button button-success" name="join" value="{{label_join}}"/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
{[ if (server_input_type != 'hidden') { ]}
|
||||
<label{{server_label_global_attr}}>{{label_server}}</label>
|
||||
{[ } ]}
|
||||
<input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
|
||||
<input type="button" class="pure-button" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
|
||||
<input type="button" class="pure-button button-success" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
<dl id="available-chatrooms"></dl>
|
||||
|
Loading…
Reference in New Issue
Block a user