diff --git a/css/converse.css b/css/converse.css index dbe9fc358..65b83284f 100644 --- a/css/converse.css +++ b/css/converse.css @@ -5,7 +5,11 @@ * Copyright (c) 2012-2014, JC Brand * 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; diff --git a/mockup/controlbox.html b/mockup/controlbox.html index 7bdb65390..8f04abe58 100644 --- a/mockup/controlbox.html +++ b/mockup/controlbox.html @@ -44,7 +44,7 @@ - + @@ -252,7 +252,7 @@ - +
@@ -261,7 +261,7 @@

Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted.

--> - +
diff --git a/mockup/index.html b/mockup/index.html index aa5f24b4e..d9815ac76 100644 --- a/mockup/index.html +++ b/mockup/index.html @@ -25,6 +25,222 @@ +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+ + +
+
+ + + + + +
+
+ Colleagues +
+
+ + + Victor Matfield + + +
+
+ + + William Winterbottom + + +
+
+ + + Gary Teichmann + + +
+
+ Family +
+
+ + + Allan Donald + + +
+
+ + + Corné Krige + + +
+
+ Friends +
+
+ + + John Smit + + +
+
+ + + Bakkies Botha + + +
+
+ Ungrouped +
+
+ + + James Small + + +
+
+ Contact Requests +
+
+ Bob Skinstad + + + + +
+
+ André Vos + + + + +
+ +
+ Pending Contacts +
+
Rassie Erasmus + +
+
Victor Matfield + +
+
+
+
+ +
+
+
+ Join an existing room or create a new one + + + + + +
+ +
+ + + + +
+
+
+
Rooms on conference.myserver.com
+
+ Current Events +   +
+
+ Software Development +   +
+
+
+ + + +
@@ -171,10 +387,10 @@
-
+
- +

Occupants:

  • Obi-wan Kenobi, Jedi Master
  • jabber the hut
    • @@ -201,11 +417,12 @@
-
- - This chatroom requires a password - - + +
+ This chatroom requires a password + + +
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 41396b498..3dee63f38 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -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 { diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index caef7277f..0ebb90cd6 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -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; } } } diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 9736b72a3..5e637d599 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -106,9 +106,6 @@ input[type=text] { width: 100%; } - input[type=submit] { - color: $save-button-color; - } } #available-chatrooms { padding: 0 1em 2em 1em; diff --git a/sass/_core.scss b/sass/_core.scss index 3c9e7dd21..dfa493774 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -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 { diff --git a/sass/_minimized_chats.scss b/sass/_minimized_chats.scss index b73ca4186..f84a48eb9 100644 --- a/sass/_minimized_chats.scss +++ b/sass/_minimized_chats.scss @@ -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; diff --git a/sass/_roster.scss b/sass/_roster.scss index 736234b37..cca452538 100644 --- a/sass/_roster.scss +++ b/sass/_roster.scss @@ -77,7 +77,6 @@ clear: both; color: $text-color; display: block; - font-weight: bold; height: 24px; line-height: 16px; overflow-y: hidden; diff --git a/sass/_variables.scss b/sass/_variables.scss index 7393b5c7a..bf7f4c580 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -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; diff --git a/src/templates/chatroom_password_form.html b/src/templates/chatroom_password_form.html index 843e2d983..1593f8be6 100644 --- a/src/templates/chatroom_password_form.html +++ b/src/templates/chatroom_password_form.html @@ -1,8 +1,10 @@
-
- {{heading}} - - - + +
+ {{heading}} + + + +
diff --git a/src/templates/chatroom_sidebar.html b/src/templates/chatroom_sidebar.html index 01e6a17e4..353f4fac6 100644 --- a/src/templates/chatroom_sidebar.html +++ b/src/templates/chatroom_sidebar.html @@ -1,7 +1,7 @@ -
+
- +

{{label_occupants}}:

diff --git a/src/templates/login_panel.html b/src/templates/login_panel.html index bf45f3708..602a85709 100644 --- a/src/templates/login_panel.html +++ b/src/templates/login_panel.html @@ -12,7 +12,7 @@ {[ } ]} {[ if (authentication == ANONYMOUS) { ]} - + {[ } ]} {[ if (authentication == PREBIND) { ]}

Disconnected.

diff --git a/src/templates/room_panel.html b/src/templates/room_panel.html index a1c861c3d..19dca7a3e 100644 --- a/src/templates/room_panel.html +++ b/src/templates/room_panel.html @@ -3,14 +3,14 @@ - +
{[ if (server_input_type != 'hidden') { ]} {{label_server}} {[ } ]} - +