Added a new color scheme.

mockup/controlbox.html

@@ -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">

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 {

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;
                             }
                         }
                     }

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;

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 {

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;

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;

sass/_variables.scss

- /* 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;

src/templates/chatroom_password_form.html

 <div class="chatroom-form-container">
-    <form class="chatroom-form">
+    <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>

src/templates/chatroom_sidebar.html

 <!-- <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> -->

src/templates/login_panel.html

@@ -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>

src/templates/room_panel.html

@@ -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>