matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CSS: trying to map ConverseJS vars to peertube colors.

Browse Source
This commit is contained in:
John Livingston 2021-11-10 17:35:35 +01:00
parent 77975ffdb6
commit b593d4fc76
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
1 changed files with 74 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
conversejs/custom/sass/_variables.scss
View File

@ -1,72 +1,82 @@
:root {
--peertube-main-foreground: #000;
--peertube-main-background: #fff;
--peertube-grey-foreground: #585858;
--peertube-grey-background: #e5e5e5;
--peertube-menu-foreground: #fff;
--peertube-menu-background: #000;
--peertube-input-foreground: #000;
--peertube-input-background: #fff;
--peertube-button-foreground: #fff;
--peertube-button-background: #f2690d;
--peertube-link: #000;
--peertube-link-hover: #000;
}
#conversejs.theme-peertube, #conversejs.theme-peertube,
#conversejs-bg.theme-peertube, #conversejs-bg.theme-peertube,
.converse-fullscreen.theme-peertube { .converse-fullscreen.theme-peertube {
--subdued-color: #a8aba1; --subdued-color: #a8aba1;
--green: #3aa569; --green: #3aa569; // only in this file
--redder-orange: #e77051; --redder-orange: #e77051; // only in this file
--orange: #e7a151; --orange: #e7a151; // only in this file
--light-blue: #578ea9; --light-blue: #578ea9; // only in this file
--lighter-blue: #85b47b; --lighter-blue: #85b47b; // only in this file
--chat-status-online: var(--green); --chat-status-online: var(--green);
--chat-status-busy: var(--redder-orange); --chat-status-busy: var(--redder-orange);
--chat-status-away: var(--orange); --chat-status-away: var(--orange);
--brand-heading-color: #387592; // TODO: is brand-heading-color used?
// TODO: is brand-heading-color used? --completion-light-color: var(--peertube-button-background);
--brand-heading-color: #387592; // $blue --completion-normal-color: var(--peertube-button-background);
--completion-light-color: #ffb9a7; // $lightest-red --completion-dark-color: var(--peertube-button-background);
--completion-normal-color: var(--redder-orange); --link-color: var(--peertube-link);
--completion-dark-color: #d24e2b; // $dark-red --link-hover-color: var(--peertube-link-hover);
--link-color: var(--light-blue); --link-color-lighten-10-percent: var(--peertube-main-foreground);
--link-hover-color: var(--lighter-blue); --global-background-color: var(--peertube-main-background);
--link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%) --inverse-link-color: var(--peertube-button-foreground);
--dark-link-color: #206485; // $dark-blue --text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background
--global-background-color: #fff; --text-color: var(--peertube-main-foreground);
--inverse-link-color: white; --controlbox-text-color: var(--peertube-main-foreground); // Note: controlbox is not used
--text-shadow-color: #fafafa; --text-color-lighten-15-percent: var(--peertube-main-foreground);
--text-color: #666; --message-text-color: var(--peertube-main-foreground);
--controlbox-text-color: #ddd;
--text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
--message-text-color: #555;
--message-receipt-color: var(--green); --message-receipt-color: var(--green);
--save-button-color: var(--green); --save-button-color: var(--green);
--message-avatar-width: 36px; --message-avatar-width: 36px;
--message-avatar-height: 36px; --message-avatar-height: 36px;
--chat-textarea-color: #666; --chat-textarea-color: var(--peertube-input-foreground);
--chat-textarea-background-color: #f6f6f6; --chat-textarea-background-color: var(--peertube-input-background);
--chat-textarea-height: 60px; --chat-textarea-height: 60px;
--send-button-height: 27px; --send-button-height: 27px;
--send-button-margin: 3px; --send-button-margin: 3px;
// TODO: is inline-action-margin used?
--inline-action-margin: 0.75em; --inline-action-margin: 0.75em;
--roster-height: 194px; --roster-height: 194px;
--chat-correcting-color: #ffffc0; --chat-correcting-color: var(--peertube-grey-background);
--chat-head-color-dark: #1e9652; --chat-head-color-dark: #1e9652; // should not be used in this plugin
--chat-head-color-darker: #0e763b; --chat-head-color-darker: #0e763b; // should not be used in this plugin
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%) --chat-head-color-lighten-50-percent: #e7f7ee; // should not be used in this plugin
--chat-head-color: var(--green); --chat-head-color: var(--green);
--chat-head-text-color: #aaa; --chat-head-text-color: var(--peertube-main-foreground);
--chat-toolbar-btn-color: var(--green); --chat-toolbar-btn-color: var(--peertube-button-background);
--chat-toolbar-btn-disabled-color: gray; --chat-toolbar-btn-disabled-color: var(--peertube-grey-background);
--chat-content-background-color: white; --chat-content-background-color: var(--peertube-main-background);
--chat-info-color: var(--subdued-color); --chat-info-color: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
--highlight-color: #dcf9f6; --highlight-color: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
--highlight-color-darker: #b0e8e2; --highlight-color-darker: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
--primary-color: var(--light-blue); --primary-color: var(--peertube-button-background);
--primary-color-dark: #397491; --primary-color-dark: var(--peertube-button-background);
--secondary-color: #818479; // gray --secondary-color: var(--peertube-grey-background);
--secondary-color-dark: #585b51; --secondary-color-dark: var(--peertube-grey-background);
--warning-color: var(--orange); --warning-color: var(--orange);
--warning-color-dark: #d2842b; --warning-color-dark: #d2842b;
--danger-color: #d24e2b; // dark-red --danger-color: #d24e2b;
--danger-color-dark: #a93415; // darker red --danger-color-dark: #a93415; // darker red
--light-background-color: #fcfdfd; --light-background-color: var(--peertube-main-background);
--error-color: #d24e2b; // dark-red --error-color: #d24e2b;
--info-color: #1e9652; // $dark-green --info-color: #1e9652;
--button-border-radius: 5px; --button-border-radius: 5px;
--chatbox-border-radius: 0; --chatbox-border-radius: 0;
--groupchats-header-color: var(--redder-orange); --groupchats-header-color: var(--peertube-button-background);
--groupchats-header-color-dark: var(--chatroom-head-bg-color-dark); --groupchats-header-color-dark: var(--peertube-button-background);
--controlbox-width: 250px; --controlbox-width: 250px;
--controlbox-head-color: var(--light-blue); --controlbox-head-color: var(--light-blue);
--controlbox-heading-color: #777; --controlbox-heading-color: #777;
@ -79,18 +89,15 @@
--minimized-chats-width: 130px; --minimized-chats-width: 130px;
--mobile-chat-width: 100%; --mobile-chat-width: 100%;
--mobile-chat-height: 400px; --mobile-chat-height: 400px;
--normal-font: "Source Sans Pro", sans-serif;
// todo: figure out a way to concatenate custom properties with strings. --heading-font: "Source Sans Pro", sans-serif;
// --font-path: "webfonts/icomoon/fonts/"; --branding-font: "Source Sans Pro", sans-serif;
--normal-font: "helvetica", "arial", sans-serif;
--heading-font: "muli", normal;
--branding-font: "baumans", cursive;
--heading-display: inline; --heading-display: inline;
--heading-color: #9b4d; --heading-color: #9b4d;
--chatroom-badge-color: var(--redder-orange); --chatroom-badge-color: var(--peertube-button-background);
--chatroom-badge-hover-color: #d24e2b; // $red --chatroom-badge-hover-color: var(--peertube-button-background);
--chatroom-correcting-color: #ffffc0; --chatroom-correcting-color: #ffffc0;
--chatroom-head-bg-color-dark: #d24e2b;
--chatroom-head-bg-color: white; --chatroom-head-bg-color: white;
--chatroom-head-border-bottom: 1px solid #eee; --chatroom-head-border-bottom: 1px solid #eee;
--chatroom-head-button-color: #999; --chatroom-head-button-color: #999;
@ -103,8 +110,8 @@
--chatroom-head-title-font-weight: bold; --chatroom-head-title-font-weight: bold;
--chatroom-head-title-padding-right: 12px; --chatroom-head-title-padding-right: 12px;
--chatroom-width: 500px; --chatroom-width: 500px;
--muc-toolbar-btn-color: #7e7e7e; --muc-toolbar-btn-color: var(--peertube-button-background);
--muc-toolbar-btn-disabled-color: lightgray; --muc-toolbar-btn-disabled-color: var(--peertube-grey-background);
--headline-head-color: var(--orange); --headline-head-color: var(--orange);
--headline-message-color: #d2842b; --headline-message-color: #d2842b;
--chatbox-button-size: 14px; --chatbox-button-size: 14px;
@ -115,17 +122,17 @@
--font-size-large: 16px; --font-size-large: 16px;
--font-size-huge: 20px; --font-size-huge: 20px;
--message-font-size: var(--font-size); --message-font-size: var(--font-size);
--separator-text-color: #aaa; --separator-text-color: var(--peertube-grey-foreground);
--chat-separator-border-bottom: 1px solid #aaa; --chat-separator-border-bottom: 1px solid var(--peertube-grey-foreground);
--chatroom-separator-border-bottom: 1px solid #aaa; --chatroom-separator-border-bottom: 1px solid #aaa;
--chatroom-message-input-border-top: 1px solid #ccc; --chatroom-message-input-border-top: 1px solid #ccc;
--chatbox-message-input-border-top: 1px solid #ccc; --chatbox-message-input-border-top: 1px solid var(--peertube-menu-background);
--line-height-small: 14px; --line-height-small: 14px;
--line-height: 16px; --line-height: 16px;
--line-height-large: 20px; --line-height-large: 20px;
--line-height-huge: 27px; --line-height-huge: 27px;
--occupants-padding: 1em; --occupants-padding: 1em;
--occupants-background-color: #f3f3f3; --occupants-background-color: var(--peertube-main-background);
--occupants-border-left: 0; --occupants-border-left: 0;
--occupants-border-bottom: 0; --occupants-border-bottom: 0;
--embedded-emoji-picker-height: 300px; --embedded-emoji-picker-height: 300px;
@ -142,15 +149,15 @@
--overlayed-chatbox-hover-height: 1em; --overlayed-chatbox-hover-height: 1em;
--overlayed-emoji-picker-height: 200px; --overlayed-emoji-picker-height: 200px;
--overlayed-max-chat-textarea-height: 200px; --overlayed-max-chat-textarea-height: 200px;
--overlayed-badge-color: #818479; // $gray-color --overlayed-badge-color: #818479; // should not be used in this plugin
--list-toggle-color: #818479; // $gray-color --list-toggle-color: #818479;
--list-toggle-hover-color: #585b51; // $dark-gray-color --list-toggle-hover-color: #585b51;
--list-toggle-font-weight: bold; --list-toggle-font-weight: bold;
--list-item-hover-color: rgb(0 0 0 / 3.5%); --list-item-hover-color: rgb(0 0 0 / 3.5%);
--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%) --list-item-action-color: #e3eef3;
--list-item-link-color: #f1f1f1; --list-item-link-color: #f1f1f1;
--list-item-link-hover-color: #ddd; --list-item-link-hover-color: #ddd;
--list-item-open-color: #444; --list-item-open-color: #444;
--list-item-open-hover-color: #444; --list-item-open-hover-color: #444;
--list-dot-circle-color: #f6dec1; // lighten($orange, 25%) --list-dot-circle-color: #f6dec1;
} }