Fix badge & button colors. Ensure vars apply to .converse_content
This commit is contained in:
JC Brand
parent
841c91dac3
commit
476b8041aa
186
css/converse.css
186
css/converse.css
|
|
@ -3804,94 +3804,6 @@ readers do not read off random characters that represent icons */
|
|||
position: static;
|
||||
width: auto; }
|
||||
|
||||
#conversejs {
|
||||
--subdued-color: #A8ABA1;
|
||||
--subdued-color-lighten-25-percent: #e6e7e4;
|
||||
--chat-status-online: #3AA569;
|
||||
--chat-status-busy: #E77051;
|
||||
--chat-status-away: #E7A151;
|
||||
--brand-heading-color: #387592;
|
||||
--completion-light-color: #FFB9A7;
|
||||
--completion-normal-color: #E77051;
|
||||
--completion-dark-color: #D24E2B;
|
||||
--link-color: #578EA9;
|
||||
--link-color-darken-20-percent: #345566;
|
||||
--link-color-lighten-10-percent: #79a5ba;
|
||||
--dark-link-color: #206485;
|
||||
--global-background-color: #578EA9;
|
||||
--inverse-link-color: white;
|
||||
--text-shadow-color: #FAFAFA;
|
||||
--text-color: #666;
|
||||
--text-color-lighten-15-percent: #8c8c8c;
|
||||
--message-text-color: #555;
|
||||
--save-button-color: #3AA569;
|
||||
--chat-textarea-color: #666;
|
||||
--chat-textarea-height: 60px;
|
||||
--send-button-height: 27px;
|
||||
--send-button-margin: 3px;
|
||||
--roster-height: 194px;
|
||||
--roster-group-toggle-hover-color: #585B51;
|
||||
--flyout-padding: 1.2em;
|
||||
--chat-head-color: #3AA569;
|
||||
--chat-head-color-lighten-50-percent: #e7f7ee;
|
||||
--chat-head-text-color: white;
|
||||
--highlight-color: #DCF9F6;
|
||||
--primary-color: #E7A151;
|
||||
--secondary-color: #387592;
|
||||
--warning-color: #D24E2B;
|
||||
--light-background-color: #FCFDFD;
|
||||
--error-color: #A53214;
|
||||
--info-color: #1E9652;
|
||||
--button-border-radius: 5px;
|
||||
--chatbox-border-radius: 4px;
|
||||
--controlbox-width: 250px;
|
||||
--controlbox-head-color: #578EA9;
|
||||
--controlbox-head-color-lighten-45-percent: #eff4f7;
|
||||
--chat-gutter: 0.5em;
|
||||
--minimized-chats-width: 130px;
|
||||
--mobile-chat-width: 100%;
|
||||
--mobile-chat-height: 400px;
|
||||
--normal-font: "Helvetica", "Arial", sans-serif;
|
||||
--heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif;
|
||||
--chatroom-head-color: #E77051;
|
||||
--chatroom-head-color-lighten-25-percent: #f6ccc1;
|
||||
--chatroom-head-color-lighten-30-percent: #fadfd7;
|
||||
--chatroom-width: 400px;
|
||||
--headline-head-color: #E7A151;
|
||||
--headline-message-color: #D2842B;
|
||||
--chatbox-button-size: 14px;
|
||||
--fullpage-chatbox-button-size: 16px;
|
||||
--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);
|
||||
--line-height-small: 14px;
|
||||
--line-height: 16px;
|
||||
--line-height-large: 20px;
|
||||
--line-height-huge: 27px;
|
||||
--occupants-padding: 1em;
|
||||
--embedded-emoji-picker-height: 200px;
|
||||
--fullpage-chat-head-height: 62px;
|
||||
--fullpage-chat-height: 100vh;
|
||||
--fullpage-chat-width: 100%;
|
||||
--fullpage-emoji-picker-height: 200px;
|
||||
--fullpage-max-chat-textarea-height: 15em;
|
||||
--overlayed-chat-head-height: 55px;
|
||||
--overlayed-chat-height: 450px;
|
||||
--overlayed-chat-width: 250px;
|
||||
--overlayed-chatbox-hover-height: 1em;
|
||||
--overlayed-emoji-picker-height: 100px;
|
||||
--overlayed-max-chat-textarea-height: 200px;
|
||||
--overlayed-badge-color: #818479;
|
||||
--list-toggle-color: #585B51;
|
||||
--list-toggle-hover-color: #818479;
|
||||
--list-item-action-color: #e3eef3;
|
||||
--list-circle-color: #89d6ab;
|
||||
--list-minus-circle-color: #f0a794;
|
||||
--list-dot-circle-color: #f6dec1; }
|
||||
|
||||
#conversejs :root {
|
||||
--blue: #007bff;
|
||||
--indigo: #6610f2;
|
||||
|
|
@ -9371,6 +9283,94 @@ readers do not read off random characters that represent icons */
|
|||
#conversejs .invisible {
|
||||
visibility: hidden !important; }
|
||||
|
||||
#conversejs, .converse-content {
|
||||
--subdued-color: #A8ABA1;
|
||||
--subdued-color-lighten-25-percent: #e6e7e4;
|
||||
--chat-status-online: #3AA569;
|
||||
--chat-status-busy: #E77051;
|
||||
--chat-status-away: #E7A151;
|
||||
--brand-heading-color: #387592;
|
||||
--completion-light-color: #FFB9A7;
|
||||
--completion-normal-color: #E77051;
|
||||
--completion-dark-color: #D24E2B;
|
||||
--link-color: #578EA9;
|
||||
--link-color-darken-20-percent: #345566;
|
||||
--link-color-lighten-10-percent: #79a5ba;
|
||||
--dark-link-color: #206485;
|
||||
--global-background-color: #578EA9;
|
||||
--inverse-link-color: white;
|
||||
--text-shadow-color: #FAFAFA;
|
||||
--text-color: #666;
|
||||
--text-color-lighten-15-percent: #8c8c8c;
|
||||
--message-text-color: #555;
|
||||
--save-button-color: #3AA569;
|
||||
--chat-textarea-color: #666;
|
||||
--chat-textarea-height: 60px;
|
||||
--send-button-height: 27px;
|
||||
--send-button-margin: 3px;
|
||||
--roster-height: 194px;
|
||||
--roster-group-toggle-hover-color: #585B51;
|
||||
--flyout-padding: 1.2em;
|
||||
--chat-head-color: #3AA569;
|
||||
--chat-head-color-lighten-50-percent: #e7f7ee;
|
||||
--chat-head-text-color: white;
|
||||
--highlight-color: #DCF9F6;
|
||||
--primary-color: #E7A151;
|
||||
--secondary-color: #578EA9;
|
||||
--warning-color: #D24E2B;
|
||||
--light-background-color: #FCFDFD;
|
||||
--error-color: #A53214;
|
||||
--info-color: #1E9652;
|
||||
--button-border-radius: 5px;
|
||||
--chatbox-border-radius: 4px;
|
||||
--controlbox-width: 250px;
|
||||
--controlbox-head-color: #578EA9;
|
||||
--controlbox-head-color-lighten-45-percent: #eff4f7;
|
||||
--chat-gutter: 0.5em;
|
||||
--minimized-chats-width: 130px;
|
||||
--mobile-chat-width: 100%;
|
||||
--mobile-chat-height: 400px;
|
||||
--normal-font: "Helvetica", "Arial", sans-serif;
|
||||
--heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
|
||||
--chatroom-head-color: #E77051;
|
||||
--chatroom-head-color-lighten-25-percent: #f6ccc1;
|
||||
--chatroom-head-color-lighten-30-percent: #fadfd7;
|
||||
--chatroom-width: 400px;
|
||||
--headline-head-color: #E7A151;
|
||||
--headline-message-color: #D2842B;
|
||||
--chatbox-button-size: 14px;
|
||||
--fullpage-chatbox-button-size: 16px;
|
||||
--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);
|
||||
--line-height-small: 14px;
|
||||
--line-height: 16px;
|
||||
--line-height-large: 20px;
|
||||
--line-height-huge: 27px;
|
||||
--occupants-padding: 1em;
|
||||
--embedded-emoji-picker-height: 200px;
|
||||
--fullpage-chat-head-height: 62px;
|
||||
--fullpage-chat-height: 100vh;
|
||||
--fullpage-chat-width: 100%;
|
||||
--fullpage-emoji-picker-height: 200px;
|
||||
--fullpage-max-chat-textarea-height: 15em;
|
||||
--overlayed-chat-head-height: 55px;
|
||||
--overlayed-chat-height: 450px;
|
||||
--overlayed-chat-width: 250px;
|
||||
--overlayed-chatbox-hover-height: 1em;
|
||||
--overlayed-emoji-picker-height: 100px;
|
||||
--overlayed-max-chat-textarea-height: 200px;
|
||||
--overlayed-badge-color: #818479;
|
||||
--list-toggle-color: #585B51;
|
||||
--list-toggle-hover-color: #818479;
|
||||
--list-item-action-color: #e3eef3;
|
||||
--list-circle-color: #89d6ab;
|
||||
--list-minus-circle-color: #f0a794;
|
||||
--list-dot-circle-color: #f6dec1; }
|
||||
|
||||
body.reset {
|
||||
margin: 0; }
|
||||
|
||||
|
|
@ -9796,15 +9796,21 @@ body.reset {
|
|||
background: white; }
|
||||
#conversejs .activated {
|
||||
display: block !important; }
|
||||
#conversejs .button-primary {
|
||||
#conversejs .btn-primary, #conversejs .button-primary, #conversejs .badge-primary {
|
||||
color: white;
|
||||
background-color: var(--primary-color); }
|
||||
#conversejs .button-secondary {
|
||||
#conversejs .btn-info, #conversejs .badge-info {
|
||||
color: white;
|
||||
background-color: var(--link-color); }
|
||||
#conversejs .btn-secondary, #conversejs .badge-secondary {
|
||||
color: white;
|
||||
background-color: var(--secondary-color); }
|
||||
#conversejs .button-cancel {
|
||||
color: white;
|
||||
background-color: var(--text-color); }
|
||||
#conversejs .btn-warning {
|
||||
color: white;
|
||||
background-color: var(--warning-color); }
|
||||
#conversejs .chat-textarea-chatbox-selected {
|
||||
border: 1px solid #578308;
|
||||
margin: 0; }
|
||||
|
|
|
|||
2
dist/converse.js
vendored
2
dist/converse.js
vendored
|
|
@ -102527,7 +102527,7 @@ __e(o.hint_show) +
|
|||
__e(o.nick || o.jid) +
|
||||
'</span>\n <span class="occupant-badges">\n ';
|
||||
if (o.affiliation === "owner") { ;
|
||||
__p += '\n <span class="badge badge-danger">' +
|
||||
__p += '\n <span class="badge badge-primary">' +
|
||||
__e(o.label_owner) +
|
||||
'</span>\n ';
|
||||
} ;
|
||||
|
|
|
|||
|
|
@ -449,11 +449,15 @@ body.reset {
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
.btn-primary, .button-primary, .badge-primary {
|
||||
color: white;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
.button-secondary {
|
||||
.btn-info, .badge-info {
|
||||
color: white;
|
||||
background-color: var(--link-color);
|
||||
}
|
||||
.btn-secondary, .badge-secondary {
|
||||
color: white;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
|
@ -461,6 +465,10 @@ body.reset {
|
|||
color: white;
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
.btn-warning {
|
||||
color: white;
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.chat-textarea-chatbox-selected {
|
||||
border: 1px solid #578308;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ $mobile_portrait_length: 480px !default;
|
|||
|
||||
$font-path: "webfonts/icomoon/fonts/" !default;
|
||||
|
||||
#conversejs {
|
||||
#conversejs, .converse-content {
|
||||
--subdued-color: #A8ABA1;
|
||||
--subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
--highlight-color: #DCF9F6;
|
||||
|
||||
--primary-color: #E7A151; // $orange
|
||||
--secondary-color: #387592; // $blue
|
||||
--secondary-color: #578EA9; // $light-blue
|
||||
--warning-color: #D24E2B; // $dark-red
|
||||
|
||||
--light-background-color: #FCFDFD;
|
||||
|
|
@ -73,7 +73,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
// --font-path: "webfonts/icomoon/fonts/";
|
||||
|
||||
--normal-font: "Helvetica", "Arial", sans-serif;
|
||||
--heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif;
|
||||
--heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
|
||||
|
||||
--chatroom-head-color: #E77051; // $red
|
||||
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,6 @@
|
|||
* Licensed under the Mozilla Public License
|
||||
*/
|
||||
@import "font-awesome";
|
||||
@import "bourbon";
|
||||
@import "variables";
|
||||
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
|
|
@ -40,6 +37,10 @@
|
|||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/utilities";
|
||||
}
|
||||
|
||||
@import "bourbon";
|
||||
@import "variables";
|
||||
|
||||
@import "core";
|
||||
@import "forms";
|
||||
@import "chatbox";
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<span class="occupant-nick">{{{o.nick || o.jid}}}</span>
|
||||
<span class="occupant-badges">
|
||||
{[ if (o.affiliation === "owner") { ]}
|
||||
<span class="badge badge-danger">{{{o.label_owner}}}</span>
|
||||
<span class="badge badge-primary">{{{o.label_owner}}}</span>
|
||||
{[ } ]}
|
||||
{[ if (o.affiliation === "admin") { ]}
|
||||
<span class="badge badge-info">{{{o.label_admin}}}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user