Commit f37fadc3 authored by JC Brand's avatar JC Brand

Added a new color scheme.

parent aaa8ea36
This diff is collapsed.
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<input type="text" name="jid" placeholder="user@server"> <input type="text" name="jid" placeholder="user@server">
<label>Password:</label> <label>Password:</label>
<input type="password" name="password" placeholder="password"> <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> <span class="conn-feedback"></span>
</form> </form>
</div> </div>
...@@ -252,7 +252,7 @@ ...@@ -252,7 +252,7 @@
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"> <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<label>Nickname</label> <label>Nickname</label>
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname"> <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>
<fieldset> <fieldset>
...@@ -261,7 +261,7 @@ ...@@ -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> <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="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> </fieldset>
</form> </form>
<dl id="available-chatrooms"> <dl id="available-chatrooms">
......
This diff is collapsed.
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
} }
.chatbox-btn { .chatbox-btn {
border-radius: 5px; border-radius: 5px;
border: 1px solid #888; border: 1px solid white;
color: white; color: white;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
...@@ -84,11 +84,11 @@ ...@@ -84,11 +84,11 @@
padding: 5px; padding: 5px;
} }
.chat-info { .chat-info {
color: $text-color; color: $warning-color;
color: #808080;
margin: 0.3em; margin: 0.3em;
&.chat-event { &.chat-event {
clear: left; clear: left;
font-style: italic;
} }
&.chat-error { &.chat-error {
color: $warning-color; color: $warning-color;
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
padding: 5px; padding: 5px;
height: $toolbar-height; height: $toolbar-height;
display: block; display: block;
background-color: $light-background-color; background-color: $toolbar-color;
a { a {
color: $link-color; color: $link-color;
} }
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
} }
.unencrypted a, .unencrypted a,
.unencrypted { .unencrypted {
color: #8f2831; color: $warning-color;
} }
.unverified a, .unverified a,
.unverified { .unverified {
......
...@@ -53,20 +53,23 @@ ...@@ -53,20 +53,23 @@
&.hidden { &.hidden {
display: none; display: none;
} }
.participants-heading {
padding: 0.3em;
font-weight: bold;
}
.participant-list { .participant-list {
list-style: none; list-style: none;
li { li {
cursor: default; cursor: default;
display: block; display: block;
font-size: 12px; font-size: 12px;
font-weight: bold;
overflow: hidden; overflow: hidden;
padding: 2px 5px; padding: 2px 5px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100px; width: 100px;
&.moderator { &.moderator {
color: #8f2831; color: $moderator-color;
} }
} }
} }
......
...@@ -106,9 +106,6 @@ ...@@ -106,9 +106,6 @@
input[type=text] { input[type=text] {
width: 100%; width: 100%;
} }
input[type=submit] {
color: $save-button-color;
}
} }
#available-chatrooms { #available-chatrooms {
padding: 0 1em 2em 1em; padding: 0 1em 2em 1em;
......
...@@ -130,13 +130,11 @@ ...@@ -130,13 +130,11 @@
.chat-title { .chat-title {
padding: 1px 0 1px 5px; padding: 1px 0 1px 5px;
color: $chat-head-text-color; color: $chat-head-text-color;
font-weight: bold;
line-height: 15px; line-height: 15px;
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
} }
a.restore-chat:visited { a.restore-chat:visited {
...@@ -163,6 +161,14 @@ ...@@ -163,6 +161,14 @@
.pure-button { .pure-button {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
} }
.button-success {
color: white;
background-color: $success-color;
}
.button-warn {
color: white;
background-color: $warning-color;
}
form { form {
&.pure-form.converse-form { &.pure-form.converse-form {
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
.unread-message-count, .unread-message-count,
.chat-head-message-count { .chat-head-message-count {
font-weight: bold; font-weight: bold;
@include linear-gradient(#f6f6f6 5%, #808080 100%); background-color: white;
border: 1px solid; border: 1px solid;
text-shadow: 1px 1px 0 $text-shadow-color; text-shadow: 1px 1px 0 $text-shadow-color;
color: $warning-color; color: $warning-color;
......
...@@ -77,7 +77,6 @@ ...@@ -77,7 +77,6 @@
clear: both; clear: both;
color: $text-color; color: $text-color;
display: block; display: block;
font-weight: bold;
height: 24px; height: 24px;
line-height: 16px; line-height: 16px;
overflow-y: hidden; overflow-y: hidden;
......
/* https://coolors.co/app/818479-b5cbb7-d2e4c4-e4e9b2-e7e08b */ /*
Color scheme helpers:
$link-color: #436F64 !default; https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
*/
$link-color: #2A9D8F !default;
$inverse-link-color: white !default; $inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default; $link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default; $text-shadow-color: #FAFAFA !default;
$text-color: #818479 !default; $text-color: #818479 !default;
$border-color: #CCC !default; $border-color: #CCC !default;
$warning-color: #681F2C !default;
$light-background-border-color: #E5E9E8 !default;
$light-background-color: beige !default;
$icon-color: #114327 !default; $icon-color: #114327 !default;
$highlight-color: #E1E6E5 !default; $highlight-color: #E1E6E5 !default;
$controlbox-head-color: #436F64 !default; $chat-head-color: #F4A261 !default;
$chat-head-color: #436F64 !default; $chatroom-head-color: #E76F51 !default;
$chatroom-head-color: #346121 !default;
$chat-head-text-color: white !default; $chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default; $chat-head-inverse-text-color: white !default;
$chat-head-height: 44px !default; $chat-head-height: 44px !default;
$save-button-color: #436F64 !default; $save-button-color: #436F64 !default;
$chat-textarea-height: 70px !default; $chat-textarea-height: 70px !default;
$toolbar-height: 25px !default; $message-them-color: #1A9707 !default;
$toolbar-color: beige !default;
$message-them-color: #346121 !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$controlbox-head-color: #577BDD !default;
$controlbox-dropdown-height: 25px !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; $chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default; $bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default; $chatbox-hover-height: 6px !default;
......
<div class="chatroom-form-container"> <div class="chatroom-form-container">
<form class="chatroom-form"> <form class="pure-form converse-form chatroom-form">
<fieldset>
<legend>{{heading}}</legend> <legend>{{heading}}</legend>
<label>{{label_password}}</label> <label>{{label_password}}</label>
<input type="password" name="password"/> <input type="password" name="password"/>
<input type="submit" value="{{label_submit}}"/> <input type="submit" value="{{label_submit}}"/>
</fieldset>
</form> </form>
</div> </div>
<!-- <div class="participants"> --> <!-- <div class="participants"> -->
<form class="room-invite"> <form class="pure-form room-invite">
<input class="invited-contact" placeholder="{{label_invitation}}" type="text"/> <input class="invited-contact" placeholder="{{label_invitation}}" type="text"/>
</form> </form>
<label>{{label_occupants}}:</label> <p class="participants-heading">{{label_occupants}}:</p>
<ul class="participant-list"></ul> <ul class="participant-list"></ul>
<!-- </div> --> <!-- </div> -->
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<span class="conn-feedback"></span> <span class="conn-feedback"></span>
{[ } ]} {[ } ]}
{[ if (authentication == ANONYMOUS) { ]} {[ 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) { ]} {[ if (authentication == PREBIND) { ]}
<p>Disconnected.</p> <p>Disconnected.</p>
......
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
<label>{{label_room_name}}</label> <label>{{label_room_name}}</label>
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/> <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}}"/> <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>
<fieldset> <fieldset>
{[ if (server_input_type != 'hidden') { ]} {[ if (server_input_type != 'hidden') { ]}
<label{{server_label_global_attr}}>{{label_server}}</label> <label{{server_label_global_attr}}>{{label_server}}</label>
{[ } ]} {[ } ]}
<input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/> <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> </fieldset>
</form> </form>
<dl id="available-chatrooms"></dl> <dl id="available-chatrooms"></dl>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment