diff --git a/css/converse.css b/css/converse.css index 820eb9e4d..b7e3bd09d 100644 --- a/css/converse.css +++ b/css/converse.css @@ -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; diff --git a/css/inverse.css b/css/inverse.css index 77cba31ba..d6af0e79b 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -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; } diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 553834d86..a2981f5d6 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -136,7 +136,7 @@ } } .chat-title { - color: $chat-head-text-color; + color: white; display: block; line-height: $line-height-large; overflow: hidden; diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index d2f989b4b..194e4e6a0 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -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; } diff --git a/sass/_messages.scss b/sass/_messages.scss index 2f7e05c66..c694e2d9d 100644 --- a/sass/_messages.scss +++ b/sass/_messages.scss @@ -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; diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 000000000..7c4f1d00e --- /dev/null +++ b/sass/_variables.scss @@ -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; diff --git a/sass/converse.scss b/sass/converse.scss index f5ac22c5b..8aae8d3d3 100644 --- a/sass/converse.scss +++ b/sass/converse.scss @@ -7,6 +7,7 @@ */ @import "font-awesome"; @import "bourbon"; +@import "variables"; @import "converse/variables"; @import "bootstrap/scss/functions"; diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss index eb7c8c53c..a71b3dd22 100644 --- a/sass/converse/_variables.scss +++ b/sass/converse/_variables.scss @@ -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; diff --git a/sass/inverse.scss b/sass/inverse.scss index ad992019e..31f748c28 100644 --- a/sass/inverse.scss +++ b/sass/inverse.scss @@ -7,6 +7,7 @@ */ @import "font-awesome"; @import "bourbon"; +@import "variables"; @import "inverse/variables"; @import "bootstrap/scss/functions"; diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss index 67f9b82e3..e1b53a63f 100644 --- a/sass/inverse/_variables.scss +++ b/sass/inverse/_variables.scss @@ -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;