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

UI improvements (fix some colors):

Browse Source 
* Fix #310: autocomplete background color.
* Fix #314: input colors.
* Autocomplete: adding a border, for better UI/UX.
This commit is contained in:
John Livingston 2024-02-12 16:14:02 +01:00
parent 3e723e8b6b
commit f30a45d1fd
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -17,6 +17,9 @@
* Fix inconsistency between browsers on textarea outlines. * Fix inconsistency between browsers on textarea outlines.
* Fix ConverseJS input borders/outline/shadow. * Fix ConverseJS input borders/outline/shadow.
* Updated translations: german, french. * Updated translations: german, french.
* Fix #310: autocomplete background color.
* Fix #314: input colors.
* Autocomplete: adding a border, for better UI/UX.
## 8.1.0 ## 8.1.0

5
conversejs/custom/shared/styles/_peertubetheme.scss
View File

@ -129,6 +129,11 @@
background-color: var(--peertube-grey-background) !important; background-color: var(--peertube-grey-background) !important;
} }
.suggestion-box__results {
// To make the autocompletes results more readable, adding a border (orange for the default theme)
border-color: var(--peertube-button-background);
}
// hidding avatars when screen width is not big enough. // hidding avatars when screen width is not big enough.
@media screen and (max-width: 250px) { @media screen and (max-width: 250px) {
.message { .message {

12
conversejs/custom/shared/styles/_variables.scss
View File

@ -20,6 +20,8 @@
.conversejs-bg.theme-peertube, .conversejs-bg.theme-peertube,
#conversejs-bg.theme-peertube, #conversejs-bg.theme-peertube,
body.converse-fullscreen.theme-peertube { body.converse-fullscreen.theme-peertube {
--foreground: var(--peertube-main-foreground);
--background: var(--peertube-main-background);
--subdued-color: #a8aba1; --subdued-color: #a8aba1;
--green: #3aa569; // only in this file --green: #3aa569; // only in this file
--redder-orange: #e77051; // only in this file --redder-orange: #e77051; // only in this file
@ -39,10 +41,10 @@ body.converse-fullscreen.theme-peertube {
--global-background-color: var(--peertube-main-background); --global-background-color: var(--peertube-main-background);
--inverse-link-color: var(--peertube-button-foreground); --inverse-link-color: var(--peertube-button-foreground);
--text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background --text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background
--text-color: var(--peertube-main-foreground); --text-color: var(--peertube-input-foreground);
--controlbox-text-color: var(--peertube-main-foreground); // Note: controlbox is not used --controlbox-text-color: var(--peertube-input-foreground); // Note: controlbox is not used
--text-color-lighten-15-percent: var(--peertube-main-foreground); --text-color-lighten-15-percent: var(--peertube-input-foreground);
--message-text-color: var(--peertube-main-foreground); --message-text-color: var(--peertube-input-foreground);
--message-receipt-color: var(--green); --message-receipt-color: var(--green);
--save-button-color: var(--green); --save-button-color: var(--green);
--button-text-color: var(--peertube-button-foreground); --button-text-color: var(--peertube-button-foreground);
@ -61,7 +63,7 @@ body.converse-fullscreen.theme-peertube {
--chat-head-color-darker: #0e763b; // should not be used in this plugin --chat-head-color-darker: #0e763b; // should not be used in this plugin
--chat-head-color-lighten-50-percent: #e7f7ee; // should not be used in this plugin --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: var(--peertube-main-foreground); --chat-head-text-color: var(--peertube-input-foreground);
--chat-toolbar-btn-color: var(--peertube-button-background); --chat-toolbar-btn-color: var(--peertube-button-background);
--chat-toolbar-btn-disabled-color: var(--peertube-grey-background); --chat-toolbar-btn-disabled-color: var(--peertube-grey-background);
--toolbar-btn-text-color: var(--peertube-button-foreground); --toolbar-btn-text-color: var(--peertube-button-foreground);