Skip to content

Commit

Permalink
WIP: Make Converse look more familiar to some users.
Browse files Browse the repository at this point in the history 
This is totally not inspired by https://discordapp.com/ :-° Hopefully
copyright doesn’t apply to a few CSS values, but this should be checked
before merging this PR.

Also I didn’t take much advantage of SCSS variables, so there is a lot
of duplication for colour values and such, this should be fixed before
this can be merged.

There is also no theme support in Converse yet, we may want to fix that
for people who prefer the old look.
  • Loading branch information
@linkmauve
linkmauve committed Aug 17, 2018
1 parent f0ad326 commit db7c117
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 68 deletions.
12 changes: 7 additions & 5 deletions sass/_chatbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,12 @@
}
.chat-title {
font-family: $heading-font;
color: white;
display: block;
color: #4F545C;
line-height: $line-height-large;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 12px;
a {
color: $chat-head-text-color;
width: 100%;
Expand Down Expand Up @@ -240,15 +240,13 @@
}

.chat-textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
@include border-bottom-radius($chatbox-border-radius);
padding: 0.5em;
width: 100%;
border: none;
min-height: $chat-textarea-height;
margin-bottom: -4px; // Not clear why this is necessar :(
resize: none;
background-color: #F6F6F7;
&.spoiler {
height: 42px;
}
Expand Down Expand Up @@ -541,6 +539,10 @@
font-size: $fullpage-chatbox-button-size;
margin: 0 0.3em;
}
.chatbox-buttons > .chatbox-btn {
font-size: $fullpage-chatbox-header-button-size !important;
margin-top: 4px;
}
.chat-head {
height: $fullpage-chat-head-height;
font-size: $font-size-huge;
Expand Down
66 changes: 19 additions & 47 deletions sass/_chatrooms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,55 +14,46 @@
}

.chatroom-features {
width: 100%;
.features-list {
padding-top: 0;
.feature {
width: 100%;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help;
.fa {
margin-right: 0.5em;
color: $text-color;
}
}
}
display: none;
}


.chat-head-chatroom {
background-color: $chatroom-head-color;
border-bottom: 1px solid $light-gray;

.chatroom-description {
color: lighten($chatroom-head-color, 25%);
display: inline;
color: black;
font-size: $font-size;
font-size: 70%;
margin-top: 3px;
overflow-y: hidden;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #D4D5D8;
padding-left: 12px;
}

a, a:visited, a:hover, a:not([href]):not([tabindex]) {
&.chatbox-btn {
&.fa {
color: $chat-head-text-color;
&.button-on:before {
color: $chatroom-head-color;
color: #C4C5C8;
}
}
}
}

.chatbox-btn {
&.button-on:before {
color: $chatroom-head-color;
color: #C4C5C8;
}
}
.chat-title {
display: inline;
.chatroom-jid {
font-size: $font-size-small;
}
Expand Down Expand Up @@ -96,7 +87,6 @@
.chatroom-body {
flex-direction: row;
flex-flow: nowrap;
@include border-bottom-radius($chatbox-border-radius);
background-color: white;
border-top: 0;
width: 100%;
Expand All @@ -105,16 +95,9 @@
.row {
flex-direction: row;
}
.chat-topic {
font-weight: bold;
color: $chatroom-head-color;
}
.chat-topic,
.chat-info {
color: $chatroom-head-color;
line-height: normal;
&.badge {
color: $chat-head-text-color;
}
display: none;
}
.mentioned {
font-weight: bold;
Expand Down Expand Up @@ -144,10 +127,9 @@
overflow-x: hidden;
overflow-y: hidden;
vertical-align: top;
background-color: white;
border-left: 1px solid $text-color;
border-bottom-right-radius: $chatbox-border-radius;
background-color: $lightest-gray;
padding: 0.5em;
max-width: 240px;

.occupants-header {
display: flex;
Expand Down Expand Up @@ -254,7 +236,7 @@
margin: 0 0.5em;
}
.button-primary {
background-color: $chatroom-head-color;
background-color: #C4C5C8;
}
}
}
Expand All @@ -263,21 +245,20 @@
.sendXMPPMessage {
.chat-toolbar {
background-color: white;
border-top: 4px solid $chatroom-head-color;
color: $chatroom-head-color;
border-top: 1px solid #C4C5C8;
color: #C4C5C8;
.fa, .fa:hover {
color: $chatroom-head-color;
color: #C4C5C8;
}
}
.chat-textarea {
border-bottom-right-radius: 0;
resize: none;
&.correcting {
background-color: lighten($chatroom-head-color, 30%);
background-color: lighten(#C4C5C8, 30%);
}
}
.send-button {
background-color: $chatroom-head-color;
background-color: #C4C5C8;
}
}

Expand Down Expand Up @@ -377,15 +358,7 @@
}

.chatroom-body {
@include border-top-radius($chatbox-border-radius);
.chatroom-form-container {
border-radius: $chatbox-border-radius;
}
.chat-area {
border-top-left-radius: $chatbox-border-radius;
.chat-content {
border-top-left-radius: $chatbox-border-radius;
}
&.full {
max-width: 100%;
.new-msgs-indicator {
Expand All @@ -394,7 +367,6 @@
}
}
.occupants {
border-top-right-radius: $chatbox-border-radius;;
padding: $occupants-padding;
.occupants-heading {
font-size: $font-size-large;
Expand Down
6 changes: 4 additions & 2 deletions sass/_controlbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,8 @@
margin: 1em 0 0 0;

.controlbox-heading {
color: #72767D;
font-weight: bold;
font-family: $heading-font;
margin: 0 0 0.5em 0;
text-transform: uppercase;
Expand Down Expand Up @@ -281,11 +283,11 @@
.controlbox-panes {
height: 100%;
overflow-y: auto;
background-color: white;
background-color: #212C31;
}

.controlbox-pane {
background-color: white;
background-color: #2F3136;
border: 0;
font-size: $font-size;
left: 0;
Expand Down
14 changes: 8 additions & 6 deletions sass/_lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

.list-toggle {
font-family: $heading-font;
font-weight: bold;
display: block;
color: $text-color;
padding: 0 0 0.5rem 0;
Expand All @@ -29,8 +30,9 @@
word-wrap: break-word;

.list-item-link {
color: #F0F1F2;
&:hover {
color: $dark-link-color;
color: #DCDDDE;
}
font-size: $font-size;
line-height: $font-size;
Expand All @@ -50,9 +52,9 @@
font-size: $font-size;
}
&.button-on {
color: $link-color;
color: #DCDDDE;
&:hover {
color: $dark-link-color;
color: #DCDDDE;
}
}
color: $subdued-color;
Expand All @@ -63,9 +65,9 @@
}

&.open {
background-color: $controlbox-head-color;
background-color: #42464D;
&:hover {
background-color: $controlbox-head-color !important;
background-color: #42464D !important;
}
a {
color: white;
Expand Down Expand Up @@ -97,7 +99,7 @@
}

&:hover {
background-color: lighten($controlbox-head-color, 45%);
background-color: #343536;
.fa {
opacity: 1;
}
Expand Down
6 changes: 3 additions & 3 deletions sass/_messages.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
z-index: 0;

.separator {
border: 0.5px solid $chat-head-color;
border-bottom-color: $light-gray;
margin: 0 1em;
position: relative;
top: 1em;
Expand All @@ -19,7 +19,7 @@
.separator-text {
background: white;
bottom: 1px; // Offset needed due to .separator border size
color: $message-text-color;
color: $lightish-gray;
display: inline-block;
line-height: 2em;
padding: 0 1em;
Expand Down Expand Up @@ -247,7 +247,7 @@
-webkit-animation: colorchange-chatmessage-muc 1s;
}
.separator {
border: 0.5px solid $chatroom-head-color;
border-bottom-color: $light-gray;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion sass/_roster.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
margin-left: 5px;
}
&:hover {
background-color: lighten($controlbox-head-color, 45%);
background-color: #343536;
.remove-xmpp-contact {
display: inline-block;
}
Expand Down
12 changes: 8 additions & 4 deletions sass/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
$subdued-color: #A8ABA1 !default;
$lightest-gray: #F3F3F3;
$light-gray: #ECEEEF;
$lightish-gray: #99AAB5;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$visitor-color: #A8ABA1 !default;
Expand Down Expand Up @@ -66,8 +69,8 @@ $roster-height: 194px !default;
$flyout-padding: 1.2em;

$chat-head-color: $green !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$chat-head-text-color: #4F545C !default;
$chat-head-inverse-text-color: black !default;

$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
Expand Down Expand Up @@ -114,7 +117,7 @@ $heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif !de

$chatroom-color-dark: $darkest-red !default;
$chatroom-color-light: $light-red !default;
$chatroom-head-color: $red !default;
$chatroom-head-color: white !default;
$chatroom-message-them-color: $green !default;
$chatroom-width: 400px !default;

Expand All @@ -127,6 +130,7 @@ $box-close-button-padding-right: 4px !default;

$chatbox-button-size: 14px !default;
$fullpage-chatbox-button-size: 16px !default;
$fullpage-chatbox-header-button-size: 24px !default;

$font-size-small: 12px !default;
$font-size: 14px !default;
Expand All @@ -142,7 +146,7 @@ $line-height-huge: 27px !default;

$occupants-padding: 1em;

$fullpage-chat-head-height: 62px !default;
$fullpage-chat-head-height: 48px !default;
$fullpage-chat-height: 100vh;
$fullpage-chat-width: 100%;
$fullpage-emoji-picker-height: 150px !default;
Expand Down

0 comments on commit db7c117

Please sign in to comment.