diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 00000000..812c1c60 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,17 @@ +'use strict'; + +module.exports = { + extends: [ + 'stylelint-config-recommended-scss', + 'stylelint-config-standard-scss' + ], + rules: { + 'selector-class-pattern': [ + // extending the kebab-case to accept ConverseJS class names. + '^([a-z][a-z0-9]*)(-[a-z0-9]+)*(__[a-z]+)?$', + { + message: 'Expected class selector to be kebab-case, or ConverseJS-style.', + } + ] + } +} diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index 2dba1615..55338090 100644 --- a/conversejs/builtin.ts +++ b/conversejs/builtin.ts @@ -135,6 +135,7 @@ window.initConverse = async function initConverse ({ emoji: true, toggle_occupants: true }, + theme: 'peertube', persistent_store: 'sessionStorage' } diff --git a/conversejs/custom/sass/_variables.scss b/conversejs/custom/sass/_variables.scss new file mode 100644 index 00000000..a09ce774 --- /dev/null +++ b/conversejs/custom/sass/_variables.scss @@ -0,0 +1,156 @@ +#conversejs.theme-peertube, +#conversejs-bg.theme-peertube, +.converse-fullscreen.theme-peertube { + --subdued-color: #a8aba1; + --green: #3aa569; + --redder-orange: #e77051; + --orange: #e7a151; + --light-blue: #578ea9; + --lighter-blue: #85b47b; + --chat-status-online: var(--green); + --chat-status-busy: var(--redder-orange); + --chat-status-away: var(--orange); + + // TODO: is brand-heading-color used? + --brand-heading-color: #387592; // $blue + --completion-light-color: #ffb9a7; // $lightest-red + --completion-normal-color: var(--redder-orange); + --completion-dark-color: #d24e2b; // $dark-red + --link-color: var(--light-blue); + --link-hover-color: var(--lighter-blue); + --link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%) + --dark-link-color: #206485; // $dark-blue + --global-background-color: #fff; + --inverse-link-color: white; + --text-shadow-color: #fafafa; + --text-color: #666; + --controlbox-text-color: #ddd; + --text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%) + --message-text-color: #555; + --message-receipt-color: var(--green); + --save-button-color: var(--green); + --message-avatar-width: 36px; + --message-avatar-height: 36px; + --chat-textarea-color: #666; + --chat-textarea-background-color: #f6f6f6; + --chat-textarea-height: 60px; + --send-button-height: 27px; + --send-button-margin: 3px; + + // TODO: is inline-action-margin used? + --inline-action-margin: 0.75em; + --roster-height: 194px; + --chat-correcting-color: #ffffc0; + --chat-head-color-dark: #1e9652; + --chat-head-color-darker: #0e763b; + --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%) + --chat-head-color: var(--green); + --chat-head-text-color: #aaa; + --chat-toolbar-btn-color: var(--green); + --chat-toolbar-btn-disabled-color: gray; + --chat-content-background-color: white; + --chat-info-color: var(--subdued-color); + --highlight-color: #dcf9f6; + --highlight-color-darker: #b0e8e2; + --primary-color: var(--light-blue); + --primary-color-dark: #397491; + --secondary-color: #818479; // gray + --secondary-color-dark: #585b51; + --warning-color: var(--orange); + --warning-color-dark: #d2842b; + --danger-color: #d24e2b; // dark-red + --danger-color-dark: #a93415; // darker red + --light-background-color: #fcfdfd; + --error-color: #d24e2b; // dark-red + --info-color: #1e9652; // $dark-green + --button-border-radius: 5px; + --chatbox-border-radius: 0; + --groupchats-header-color: var(--redder-orange); + --groupchats-header-color-dark: var(--chatroom-head-bg-color-dark); + --controlbox-width: 250px; + --controlbox-head-color: var(--light-blue); + --controlbox-heading-color: #777; + --controlbox-heading-font-weight: bold; + --controlbox-heading-top-margin: 0.75em; + --controlbox-pane-background-color: #333; + --controlbox-pane-bg-hover-color: #464646; + --panel-divider-color: #333; + --chat-gutter: 0.5em; + --minimized-chats-width: 130px; + --mobile-chat-width: 100%; + --mobile-chat-height: 400px; + + // todo: figure out a way to concatenate custom properties with strings. + // --font-path: "webfonts/icomoon/fonts/"; + + --normal-font: "helvetica", "arial", sans-serif; + --heading-font: "muli", normal; + --branding-font: "baumans", cursive; + --heading-display: inline; + --heading-color: #9b4d; + --chatroom-badge-color: var(--redder-orange); + --chatroom-badge-hover-color: #d24e2b; // $red + --chatroom-correcting-color: #ffffc0; + --chatroom-head-bg-color: white; + --chatroom-head-border-bottom: 1px solid #eee; + --chatroom-head-button-color: #999; + --chatroom-head-color: #7e7e7e; + --chatroom-head-description-border-left: 1px solid #ddd; + --chatroom-head-description-color: black; + --chatroom-head-description-display: inline; + --chatroom-head-description-link-color: #00b3f4; + --chatroom-head-description-padding-left: 12px; + --chatroom-head-title-font-weight: bold; + --chatroom-head-title-padding-right: 12px; + --chatroom-width: 500px; + --muc-toolbar-btn-color: #7e7e7e; + --muc-toolbar-btn-disabled-color: lightgray; + --headline-head-color: var(--orange); + --headline-message-color: #d2842b; + --chatbox-button-size: 14px; + --fullpage-chatbox-button-size: 24px; + --font-size-tiny: 10px; + --font-size-small: 12px; + --font-size: 14px; + --font-size-large: 16px; + --font-size-huge: 20px; + --message-font-size: var(--font-size); + --separator-text-color: #aaa; + --chat-separator-border-bottom: 1px solid #aaa; + --chatroom-separator-border-bottom: 1px solid #aaa; + --chatroom-message-input-border-top: 1px solid #ccc; + --chatbox-message-input-border-top: 1px solid #ccc; + --line-height-small: 14px; + --line-height: 16px; + --line-height-large: 20px; + --line-height-huge: 27px; + --occupants-padding: 1em; + --occupants-background-color: #f3f3f3; + --occupants-border-left: 0; + --occupants-border-bottom: 0; + --embedded-emoji-picker-height: 300px; + --avatar-border-radius: 10%; + --avatar-border: 0; + --avatar-background-color: none; + --fullpage-chat-height: calc(var(--vh, 1vh) * 100); + --fullpage-chat-width: 100%; + --fullpage-emoji-picker-height: 300px; + --fullpage-max-chat-textarea-height: 15em; + --overlayed-chat-head-height: 55px; + --overlayed-chat-height: 450px; + --overlayed-chat-width: 300px; + --overlayed-chatbox-hover-height: 1em; + --overlayed-emoji-picker-height: 200px; + --overlayed-max-chat-textarea-height: 200px; + --overlayed-badge-color: #818479; // $gray-color + --list-toggle-color: #818479; // $gray-color + --list-toggle-hover-color: #585b51; // $dark-gray-color + --list-toggle-font-weight: bold; + --list-item-hover-color: rgb(0 0 0 / 3.5%); + --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%) + --list-item-link-color: #f1f1f1; + --list-item-link-hover-color: #ddd; + --list-item-open-color: #444; + --list-item-open-hover-color: #444; + --list-dot-circle-color: #f6dec1; // lighten($orange, 25%) +} diff --git a/conversejs/custom/sass/livechat.scss b/conversejs/custom/sass/livechat.scss index c08b5254..b307e995 100644 --- a/conversejs/custom/sass/livechat.scss +++ b/conversejs/custom/sass/livechat.scss @@ -1,6 +1,15 @@ +@import "./variables"; @import "sass/converse"; body.livechat-iframe #conversejs .chat-head { // Hidding the chat-head when the plugin is displayed in an iframe. display: none; } + +#conversejs-bg { + .converse-brand__heading { + img { + margin-top: 0.3em; + } + } +} diff --git a/conversejs/custom/templates/background_logo.js b/conversejs/custom/templates/background_logo.js index bd871feb..305882fb 100644 --- a/conversejs/custom/templates/background_logo.js +++ b/conversejs/custom/templates/background_logo.js @@ -3,7 +3,6 @@ import { api } from '@converse/headless/converse-core' export default () => html`