Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Move common Sass variables into a single file

Browse Source 
Part of slowly trying to bring all styles into a single CSS file.
This commit is contained in:
JC Brand 2018-04-27 16:50:58 +02:00
parent 36ccb4618f
commit ab09379a51
10 changed files with 187 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
css/converse.css
View File

@ -7073,7 +7073,7 @@ body.reset {
display: block !important; }
#conversejs .button-primary {
color: white;
background-color: #3AA569; }
background-color: #E7A151; }
#conversejs .button-secondary {
color: white;
background-color: #387592; }
@ -8067,7 +8067,7 @@ body.reset {
background-color: #E77051; }
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: white;
color: #f6ccc1;
font-size: 16px;
font-size: 80%;
overflow-y: hidden;
@ -8089,15 +8089,9 @@ body.reset {
#conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
#conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
color: #E77051; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title,
#conversejs .chat-head-chatroom .chat-title {
color: #FF977C; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
#conversejs .chat-head-chatroom .chat-title .chatroom-name {
color: white; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 12px; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 12px; }
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 400px; }
@ -8406,11 +8400,6 @@ body.reset {
#conversejs .message.chat-msg .spoiler-toggle:before {
padding-right: 0.25em;
whitespace: nowrap; }
#conversejs .message.chat-msg .avatar {
background: #818479;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem;
word-wrap: break-word;
@ -8422,18 +8411,30 @@ body.reset {
color: #666; }
#conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .avatar {
margin-top: 0.5em;
background: #818479;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-heading {
margin-top: 0.5em;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.5em; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
margin-left: 2.75rem; }
#conversejs .message.chat-msg.chat-action .chat-msg-heading {
margin-top: 0; }
#conversejs .message.chat-msg.chat-msg-followup {
padding: 0.25rem 1rem; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
margin-left: 2.75rem; }
#conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
@ -8602,11 +8603,6 @@ body.reset {
background: #3d6b00;
color: inherit; }
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
#conversejs.converse-embedded {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

43
css/inverse.css
View File

@ -8209,7 +8209,7 @@ body {
background-color: #E77051; }
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: white;
color: #f6ccc1;
font-size: 18px;
font-size: 80%;
overflow-y: hidden;
@ -8231,15 +8231,9 @@ body {
#conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
#conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
color: #E77051; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title,
#conversejs .chat-head-chatroom .chat-title {
color: #FF977C; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
#conversejs .chat-head-chatroom .chat-title .chatroom-name {
color: white; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 14px; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 14px; }
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 300px; }
@ -8405,7 +8399,7 @@ body {
background-color: orange; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
color: #E77051; }
color: #D24E2B; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor {
color: #A8ABA1; }
@ -8594,11 +8588,6 @@ body {
#conversejs .message.chat-msg .spoiler-toggle:before {
padding-right: 0.25em;
whitespace: nowrap; }
#conversejs .message.chat-msg .avatar {
background: #818479;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-content {
margin-left: 0.5rem;
word-wrap: break-word;
@ -8610,18 +8599,30 @@ body {
color: #666; }
#conversejs .message.chat-msg .chat-msg-text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .avatar {
margin-top: 0.5em;
background: #818479;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg-heading {
margin-top: 0.5em;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.5em; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
margin-left: 2.75rem; }
#conversejs .message.chat-msg.chat-action .chat-msg-heading {
margin-top: 0; }
#conversejs .message.chat-msg.chat-msg-followup {
padding: 0.25rem 1rem; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
margin-left: 2.75rem; }
#conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }

2
sass/_chatbox.scss
View File

@ -136,7 +136,7 @@
}
}
.chat-title {
color: $chat-head-text-color;
color: white;
display: block;
line-height: $line-height-large;
overflow: hidden;

6
sass/_chatrooms.scss
View File

@ -11,7 +11,7 @@
background-color: $chatroom-head-color;
.chatroom-description {
color: white;
color: lighten($chatroom-head-color, 25%);
font-size: $font-size-large;
font-size: 80%;
overflow-y: hidden;
@ -37,10 +37,6 @@
}
}
.chat-title {
color: $chatroom-color-lightest;
.chatroom-name {
color: white;
}
.chatroom-jid {
font-size: $font-size-small;
}

27
sass/_messages.scss
View File

@ -19,7 +19,7 @@
.separator-text {
background: white;
bottom: 1px; // Offset needed due to .separator border size
color: #666;
color: $message-text-color;
display: inline-block;
line-height: 2em;
padding: 0 1em;
@ -91,13 +91,6 @@
whitespace: nowrap;
}
}
.avatar {
background: $gray-color;
height: 36px;
vertical-align: middle;
width: 36px;
}
.chat-msg-content {
margin-left: 0.5rem;
word-wrap: break-word;
@ -111,13 +104,22 @@
.chat-msg-text {
padding: 0;
color: #666;
color: $message-text-color;
.emojione {
margin-bottom: -6px;
}
}
.avatar {
margin-top: 0.5em;
background: $gray-color;
height: 36px;
vertical-align: middle;
width: 36px;
}
.chat-msg-heading {
margin-top: 0.5em;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
display: block;
@ -128,7 +130,14 @@
padding-left: 0.5em;
}
}
&.chat-action {
.chat-msg-heading {
margin-top: 0;
}
}
&.chat-msg-followup {
padding: 0.25rem 1rem;
.chat-msg-heading,
.avatar {
display: none;

119
sass/_variables.scss Normal file
View File

@ -0,0 +1,119 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$visitor-color: #A8ABA1 !default;
$lightest-blue: #89B7CD;
$light-blue: #578EA9;
$blue: #387592;
$dark-blue: #206485;
$darkest-blue: #114C68;
$lightest-red: #FFB9A7;
$light-red: #FF977C;
$red: #E77051;
$dark-red: #D24E2B;
$darkest-red: #A53214;
$lightest-orange: #FFD6A7;
$light-orange: #E7A151;
$orange: #E7A151;
$dark-orange: #D2842B;
$darkest-orange: #A56214;
$greenish-white: #E7FBF0;
$reddish-white: #FFECE7;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$lightest-green: #E7FBF0;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$link-color: $light-blue !default;
$dark-link-color: $dark-blue !default;
$global-background-color: $light-blue !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default;
$text-color: #777 !default;
$message-text-color: #666 !default;
$light-text-color: #A8ABA1 !default;
$border-color: #CCC !default;
$icon-color: $blue !default;
$save-button-color: $green !default;
$chat-textarea-height: 60px !default;
$send-button-height: 27px !default;
$send-button-margin: 3px !default;
$message-them-color: $green !default;
$roster-height: 194px !default;
$chat-head-color: $green !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
$primary-color: $orange !default;
$secondary-color: $blue !default;
$warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default;
$moderator-color: $dark-red !default;
$online-color: $green !default;
$error-color: $darkest-red !default;
$info-color: $dark-green !default;
$rounded-border-radius: 4px !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$controlbox-width: 250px !default;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default;
$mobile-chat-height: 400px !default;
$small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
$chatroom-message-them-color: $green !default;
$headline-head-color: $orange !default;
$box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
$box-close-font-size: 16px !default;

1
sass/converse.scss
View File

@ -7,6 +7,7 @@
*/
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "converse/variables";
@import "bootstrap/scss/functions";

113
sass/converse/_variables.scss
View File

@ -1,139 +1,28 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$visitor-color: #A8ABA1 !default;
$lightest-blue: #89B7CD;
$light-blue: #578EA9;
$blue: #387592;
$dark-blue: #206485;
$darkest-blue: #114C68;
$lightest-red: #FFB9A7;
$light-red: #FF977C;
$red: #E77051;
$dark-red: #D24E2B;
$darkest-red: #A53214;
$lightest-orange: #FFD6A7;
$light-orange: #E7A151;
$orange: #E7A151;
$dark-orange: #D2842B;
$darkest-orange: #A56214;
$greenish-white: #E7FBF0;
$reddish-white: #FFECE7;
$lightest-green: #BCEDD1;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$link-color: $light-blue !default;
$dark-link-color: $dark-blue !default;
$global-background-color: $light-blue !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default;
$text-color: #777 !default;
$light-text-color: #A8ABA1 !default;
$border-color: #CCC !default;
$icon-color: $blue !default;
$save-button-color: $green !default;
$chat-textarea-height: 60px !default;
$max-chat-textarea-height: 200px !default;
$send-button-height: 27px !default;
$send-button-margin: 3px !default;
$emoji-picker-height: 100px !default;
$message-them-color: $green !default;
$roster-height: 194px !default;
$roster-item-height: 60px !default;
$chat-head-color: $green !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$chat-head-height: 55px !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
$controlbox-dropdown-height: 25px !default;
$controlbox-head-color: $light-blue !default;
$controlbox-head-height: 55px !default;
$controlbox-pane-padding: 1em !default;
$primary-color: $green !default;
$secondary-color: $blue !default;
$warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default;
$moderator-color: $dark-red !default;
$online-color: $green !default;
$error-color: $darkest-red !default;
$info-color: $dark-green !default;
$rounded-border-radius: 4px !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default;
$chatbox-hover-height: 1em !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$font-size-small: 12px !default;
$font-size: 14px !default;
$font-size-large: 16px !default;
$font-size-huge: 20px !default;
$legend-font-size: 16px !default;
$toolbar-color: $greenish-white !default;
$emoji-picker-height: 100px !default;
$line-height-small: 14px !default;
$line-height: 16px !default;
$line-height-large: 20px !default;
$controlbox-width: 250px !default;
$chat-width: 250px !default;
$chat-height: 450px !default;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default;
$mobile-chat-height: 400px !default;
$small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
$chatroom-width: 400px !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-lightest: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
$chatroom-message-them-color: $green !default;
$chatroom-toolbar-color: $reddish-white !default;
$headline-head-color: $orange !default;
$box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
$box-close-font-size: 16px !default;

1
sass/inverse.scss
View File

@ -7,6 +7,7 @@
*/
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "inverse/variables";
@import "bootstrap/scss/functions";

111
sass/inverse/_variables.scss
View File

@ -1,145 +1,36 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$visitor-color: #A8ABA1 !default;
$lightest-blue: #89B7CD;
$light-blue: #578EA9;
$blue: #387592;
$dark-blue: #206485;
$darkest-blue: #114C68;
$lightest-red: #FFB9A7;
$light-red: #FF977C;
$red: #E77051;
$dark-red: #D24E2B;
$darkest-red: #A53214;
$lightest-orange: #FFD6A7;
$light-orange: #E7A151;
$orange: #E7A151;
$dark-orange: #D2842B;
$darkest-orange: #A56214;
$greenish-white: #E7FBF0;
$reddish-white: #FFECE7;
$lightest-green: #E7FBF0;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$link-color: $light-blue !default;
$dark-link-color: $dark-blue !default;
$global-background-color: $light-blue !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default;
$text-color: #777 !default;
$light-text-color: #A8ABA1 !default;
$border-color: #CCC !default;
$icon-color: $blue !default;
$save-button-color: $green !default;
$send-button-height: 27px !default;
$send-button-margin: 3px !default;
$message-them-color: $green !default;
$max-chat-textarea-height: 400px !default;
$emoji-picker-height: 150px !default;
$roster-height: 194px !default;
$roster-item-height: 30px !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-height: 62px !default;
$chat-textarea-height: 60px !default;
$max-chat-textarea-height: 400px !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
$controlbox-dropdown-height: 30px !default;
$controlbox-head-color: $light-blue !default;
$controlbox-head-height: 63px !default;
$controlbox-pane-padding: $flyout-padding !default;
$primary-color: $orange !default;
$secondary-color: $blue !default;
$warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default;
$moderator-color: $red !default;
$online-color: $green !default;
$error-color: $darkest-red !default;
$info-color: $dark-green !default;
$rounded-border-radius: 4px !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$font-size-small: 14px !default;
$font-size: 16px !default;
$font-size-large: 18px !default;
$font-size-huge: 26px !default;
$legend-font-size: 18px !default;
$toolbar-color: $greenish-white !default;
$line-height-small: 20px !default;
$line-height: 22px !default;
$line-height-large: 24px !default;
$line-height-huge: 30px !default;
$controlbox-width: 250px !default;
$chat-width: 100% !default;
$chat-height: 100%;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
$padding: 1em;
$mobile-chat-width: 100% !default;
$mobile-chat-height: 400px !default;
$small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
$chatroom-head-height: 62px !default;
$chatroom-width: 300px !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-lightest: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
$chatroom-message-them-color: $green !default;
$chatroom-toolbar-color: $reddish-white !default;
$headline-head-color: $orange !default;
$box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
$box-close-font-size: 16px !default;