Add a dark theme inspired by Discord
This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
This commit is contained in:
parent
067d87a73e
commit
174b257c39
181
css/converse.css
181
css/converse.css
|
@ -9306,6 +9306,7 @@ readers do not read off random characters that represent icons */
|
|||
--message-receipt-color: #3AA569;
|
||||
--save-button-color: #3AA569;
|
||||
--chat-textarea-color: #666;
|
||||
--chat-textarea-background-color: white;
|
||||
--chat-textarea-height: 60px;
|
||||
--send-button-height: 27px;
|
||||
--send-button-margin: 3px;
|
||||
|
@ -9315,6 +9316,9 @@ readers do not read off random characters that represent icons */
|
|||
--chat-head-color: #3AA569;
|
||||
--chat-head-color-lighten-50-percent: #e7f7ee;
|
||||
--chat-head-text-color: white;
|
||||
--chat-correcting-color: var(--chat-head-color-lighten-50-percent);
|
||||
--chat-topic-display: block;
|
||||
--chat-info-display: block;
|
||||
--highlight-color: #DCF9F6;
|
||||
--primary-color: #578EA9;
|
||||
--primary-color-dark: #397491;
|
||||
|
@ -9332,16 +9336,30 @@ readers do not read off random characters that represent icons */
|
|||
--controlbox-width: 250px;
|
||||
--controlbox-head-color: #578EA9;
|
||||
--controlbox-head-color-lighten-45-percent: #eff4f7;
|
||||
--controlbox-pane-background-color: white;
|
||||
--controlbox-heading-color: inherit;
|
||||
--controlbox-heading-font-weight: normal;
|
||||
--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;
|
||||
--heading-display: block;
|
||||
--heading-color: white;
|
||||
--chatroom-head-color: #E77051;
|
||||
--chatroom-head-color-lighten-25-percent: #f6ccc1;
|
||||
--chatroom-head-color-lighten-30-percent: #fadfd7;
|
||||
--chatroom-head-button-color: var(--chatroom-head-color);
|
||||
--chatroom-head-title-font-weight: normal;
|
||||
--chatroom-head-title-padding-right: 0px;
|
||||
--chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent);
|
||||
--chatroom-head-description-link-color: white;
|
||||
--chatroom-head-description-display: block;
|
||||
--chatroom-head-description-border-left: 0px;
|
||||
--chatroom-head-description-padding-left: 0px;
|
||||
--chatroom-head-border-bottom: 0px;
|
||||
--chatroom-width: 400px;
|
||||
--chatroom-correcting-color: #fadfd7;
|
||||
--headline-head-color: #E7A151;
|
||||
--headline-message-color: #D2842B;
|
||||
--chatbox-button-size: 14px;
|
||||
|
@ -9352,12 +9370,25 @@ readers do not read off random characters that represent icons */
|
|||
--font-size-large: 16px;
|
||||
--font-size-huge: 20px;
|
||||
--message-font-size: var(--font-size);
|
||||
--separator-text-color: var(--message-text-color);
|
||||
--chat-separator-border-bottom: 2px solid var(--chat-head-color);
|
||||
--chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color);
|
||||
--message-input-border-top: 4px solid var(--chatroom-head-color);
|
||||
--message-input-color: var(--chatroom-head-color);
|
||||
--line-height-small: 14px;
|
||||
--line-height: 16px;
|
||||
--line-height-large: 20px;
|
||||
--line-height-huge: 27px;
|
||||
--occupants-padding: 1em;
|
||||
--occupants-background-color: white;
|
||||
--occupants-max-width: inherit;
|
||||
--occupants-border-left: 1px solid var(--text-color);
|
||||
--occupants-border-bottom: 1px solid lightgrey;
|
||||
--occupants-features-display: block;
|
||||
--embedded-emoji-picker-height: 200px;
|
||||
--avatar-border-radius: 10%;
|
||||
--avatar-border: 1px solid lightgrey;
|
||||
--avatar-background-color: white;
|
||||
--fullpage-chat-head-height: 62px;
|
||||
--fullpage-chat-height: 100vh;
|
||||
--fullpage-chat-width: 100%;
|
||||
|
@ -9372,11 +9403,62 @@ readers do not read off random characters that represent icons */
|
|||
--overlayed-badge-color: #818479;
|
||||
--list-toggle-color: #585B51;
|
||||
--list-toggle-hover-color: #818479;
|
||||
--list-toggle-font-weight: normal;
|
||||
--list-item-action-color: #e3eef3;
|
||||
--list-item-link-color: inherit;
|
||||
--list-item-link-hover-color: var(--dark-link-color);
|
||||
--list-item-open-color: var(--controlbox-head-color);
|
||||
--list-item-open-hover-color: var(--controlbox-head-color);
|
||||
--list-circle-color: #89d6ab;
|
||||
--list-minus-circle-color: #f0a794;
|
||||
--list-dot-circle-color: #f6dec1; }
|
||||
|
||||
#conversejs.theme-dark {
|
||||
--avatar-border-radius: 100%;
|
||||
--avatar-border: 0px;
|
||||
--avatar-background-color: none;
|
||||
--controlbox-pane-background-color: #333;
|
||||
--controlbox-heading-color: #777;
|
||||
--controlbox-heading-font-weight: bold;
|
||||
--chat-topic-display: none;
|
||||
--chat-info-display: none;
|
||||
--chat-textarea-background-color: #F6F6F6;
|
||||
--chat-correcting-color: #FFFFC0;
|
||||
--chat-head-text-color: #999;
|
||||
--chatbox-border-radius: 0px;
|
||||
--heading-display: inline;
|
||||
--heading-color: #4F545C;
|
||||
--chatroom-head-color: white;
|
||||
--chatroom-head-color-lighten-25-percent: blue;
|
||||
--chatroom-head-button-color: #999;
|
||||
--chatroom-head-title-font-weight: bold;
|
||||
--chatroom-head-title-padding-right: 12px;
|
||||
--chatroom-head-description-color: black;
|
||||
--chatroom-head-description-link-color: #00b3f4;
|
||||
--chatroom-head-description-display: inline;
|
||||
--chatroom-head-description-border-left: 1px solid #DDD;
|
||||
--chatroom-head-description-padding-left: 12px;
|
||||
--chatroom-head-border-bottom: 1px solid #EEE;
|
||||
--chatroom-correcting-color: #FFFFC0;
|
||||
--occupants-background-color: #F3F3F3;
|
||||
/* TODO: find a way to allow that and reflow the chat-area properly.
|
||||
* --occupants-max-width: 240px; */
|
||||
--occupants-border-left: 0px;
|
||||
--occupants-border-bottom: 0px;
|
||||
--occupants-features-display: none;
|
||||
--separator-text-color: #AAA;
|
||||
--chat-separator-border-bottom: 1px solid #AAA;
|
||||
--chatroom-separator-border-bottom: 1px solid #AAA;
|
||||
--message-input-border-top: 1px solid #CCC;
|
||||
--message-input-color: #CCC;
|
||||
--fullpage-chat-head-height: 40px;
|
||||
--fullpage-chatbox-button-size: 24px;
|
||||
--list-toggle-font-weight: bold;
|
||||
--list-item-link-color: #F1F1F1;
|
||||
--list-item-link-hover-color: #DDD;
|
||||
--list-item-open-color: #444;
|
||||
--list-item-open-hover-color: #444; }
|
||||
|
||||
body.reset {
|
||||
margin: 0; }
|
||||
|
||||
|
@ -9801,9 +9883,9 @@ body.reset {
|
|||
text-align: center;
|
||||
width: 100%; }
|
||||
#conversejs .avatar {
|
||||
border-radius: 10%;
|
||||
border: 1px solid lightgrey;
|
||||
background: white; }
|
||||
border-radius: var(--avatar-border-radius);
|
||||
border: var(--avatar-border);
|
||||
background-color: var(--avatar-background-color); }
|
||||
#conversejs .activated {
|
||||
display: block !important; }
|
||||
#conversejs .nav-pills .nav-link.active,
|
||||
|
@ -10104,13 +10186,16 @@ body.reset {
|
|||
width: var(--mobile-chat-width);
|
||||
height: 100vh; } }
|
||||
#conversejs .chatbox .chat-title {
|
||||
display: var(--heading-display);
|
||||
font-family: var(--heading-font);
|
||||
color: white;
|
||||
color: var(--heading-color);
|
||||
display: block;
|
||||
line-height: var(--line-height-large);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
#conversejs .chatbox .chat-title.groupchat {
|
||||
padding-right: var(--chatroom-head-title-padding-right); }
|
||||
#conversejs .chatbox .chat-title a {
|
||||
color: var(--chat-head-text-color);
|
||||
width: 100%; }
|
||||
|
@ -10191,6 +10276,7 @@ body.reset {
|
|||
width: 100%; }
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-textarea {
|
||||
color: var(--chat-textarea-color);
|
||||
background-color: var(--chat-textarea-background-color);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-radius: var(--chatbox-border-radius);
|
||||
|
@ -10203,7 +10289,7 @@ body.reset {
|
|||
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
|
||||
height: 42px; }
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-textarea.correcting {
|
||||
background-color: var(--chat-head-color-lighten-50-percent); }
|
||||
background-color: var(--chat-correcting-color); }
|
||||
#conversejs .chatbox .sendXMPPMessage .send-button {
|
||||
position: static;
|
||||
left: var(--send-button-margin);
|
||||
|
@ -10691,6 +10777,8 @@ body.reset {
|
|||
width: 100%; }
|
||||
#conversejs #controlbox .controlbox-section .controlbox-heading {
|
||||
font-family: var(--heading-font);
|
||||
color: var(--controlbox-heading-color);
|
||||
font-weight: var(--controlbox-heading-font-weight);
|
||||
padding: 0;
|
||||
margin: 0.75em 0;
|
||||
font-size: 1.1em;
|
||||
|
@ -10737,13 +10825,13 @@ body.reset {
|
|||
#conversejs #controlbox .controlbox-panes {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: white; }
|
||||
background-color: var(--controlbox-pane-background-color); }
|
||||
#conversejs #controlbox .controlbox-subtitle {
|
||||
font-size: 90%;
|
||||
padding: 0.5em;
|
||||
text-align: right; }
|
||||
#conversejs #controlbox .controlbox-pane {
|
||||
background-color: white;
|
||||
background-color: var(--controlbox-pane-background-color);
|
||||
border: 0;
|
||||
font-size: var(--font-size);
|
||||
left: 0;
|
||||
|
@ -11144,6 +11232,7 @@ body.reset {
|
|||
padding: 0.3em 0; }
|
||||
#conversejs .list-container .list-toggle {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: var(--list-toggle-font-weight);
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
padding: 0 0 0.5rem 0; }
|
||||
|
@ -11163,6 +11252,7 @@ body.reset {
|
|||
text-shadow: 0 1px 0 var(--text-shadow-color);
|
||||
word-wrap: break-word; }
|
||||
#conversejs .items-list .list-item .list-item-link {
|
||||
color: var(--list-item-link-color);
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--font-size);
|
||||
padding-right: 0.5em;
|
||||
|
@ -11170,7 +11260,7 @@ body.reset {
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis; }
|
||||
#conversejs .items-list .list-item .list-item-link:hover {
|
||||
color: var(--dark-link-color); }
|
||||
color: var(--list-item-link-hover-color); }
|
||||
#conversejs .items-list .list-item .list-item-action {
|
||||
opacity: 0;
|
||||
font-size: var(--font-size-tiny);
|
||||
|
@ -11181,16 +11271,16 @@ body.reset {
|
|||
#conversejs .items-list .list-item .list-item-action:before {
|
||||
font-size: var(--font-size); }
|
||||
#conversejs .items-list .list-item .list-item-action.button-on {
|
||||
color: var(--link-color); }
|
||||
color: var(--list-item-link-color); }
|
||||
#conversejs .items-list .list-item .list-item-action.button-on:hover {
|
||||
color: var(--dark-link-color); }
|
||||
color: var(--list-item-link-hover-color); }
|
||||
#conversejs .items-list .list-item .list-item-action:hover {
|
||||
color: var(--list-toggle-hover-color);
|
||||
opacity: 1; }
|
||||
#conversejs .items-list .list-item.open {
|
||||
background-color: var(--controlbox-head-color); }
|
||||
background-color: var(--list-item-open-color); }
|
||||
#conversejs .items-list .list-item.open:hover {
|
||||
background-color: var(--controlbox-head-color) !important; }
|
||||
background-color: var(--list-item-open-hover-color) !important; }
|
||||
#conversejs .items-list .list-item.open a {
|
||||
color: white; }
|
||||
#conversejs .items-list .list-item.open .list-item-link:hover {
|
||||
|
@ -11250,20 +11340,24 @@ body.reset {
|
|||
|
||||
#conversejs.converse-embedded .chat-head-chatroom,
|
||||
#conversejs .chat-head-chatroom {
|
||||
background-color: var(--chatroom-head-color); }
|
||||
background-color: var(--chatroom-head-color);
|
||||
border-bottom: var(--chatroom-head-border-bottom); }
|
||||
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
|
||||
#conversejs .chat-head-chatroom .chatroom-description {
|
||||
color: var(--chatroom-head-color-lighten-25-percent);
|
||||
color: var(--chatroom-head-description-color);
|
||||
display: var(--chatroom-head-description-display);
|
||||
font-size: var(--font-size);
|
||||
font-size: 70%;
|
||||
margin-top: 3px;
|
||||
overflow-y: hidden;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
white-space: nowrap;
|
||||
border-left: var(--chatroom-head-description-border-left);
|
||||
padding-left: var(--chatroom-head-description-padding-left); }
|
||||
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description a,
|
||||
#conversejs .chat-head-chatroom .chatroom-description a {
|
||||
color: white; }
|
||||
color: var(--chatroom-head-description-link-color); }
|
||||
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
|
||||
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
|
||||
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
|
||||
|
@ -11275,13 +11369,18 @@ body.reset {
|
|||
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
|
||||
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
|
||||
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
|
||||
color: var(--chatroom-head-color); }
|
||||
color: var(--chatroom-head-button-color); }
|
||||
#conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
|
||||
#conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
|
||||
color: var(--chatroom-head-color); }
|
||||
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
|
||||
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
|
||||
font-size: var(--font-size-small); }
|
||||
color: var(--chatroom-head-button-color); }
|
||||
#conversejs.converse-embedded .chat-head-chatroom .chat-title,
|
||||
#conversejs .chat-head-chatroom .chat-title {
|
||||
display: var(--heading-display);
|
||||
font-weight: var(--chatroom-head-title-font-weight);
|
||||
padding-right: var(--chatroom-head-title-padding-right); }
|
||||
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
|
||||
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
|
||||
font-size: var(--font-size-small); }
|
||||
|
||||
#conversejs.converse-embedded .chatroom,
|
||||
#conversejs .chatroom {
|
||||
|
@ -11325,10 +11424,12 @@ body.reset {
|
|||
flex-direction: row; }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-topic,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
|
||||
display: var(--chat-topic-display);
|
||||
font-weight: bold;
|
||||
color: var(--chatroom-head-color); }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
|
||||
display: var(--chat-info-display);
|
||||
color: var(--chatroom-head-color);
|
||||
line-height: normal; }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info.badge,
|
||||
|
@ -11360,10 +11461,11 @@ body.reset {
|
|||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
border-left: 1px solid var(--text-color);
|
||||
background-color: var(--occupants-background-color);
|
||||
border-left: var(--occupants-border-left);
|
||||
border-bottom-right-radius: var(--chatbox-border-radius);
|
||||
padding: 0.5em; }
|
||||
padding: 0.5em;
|
||||
max-width: var(--occupants-max-width); }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-header,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header {
|
||||
display: flex;
|
||||
|
@ -11375,6 +11477,9 @@ body.reset {
|
|||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
|
||||
font-family: var(--heading-font); }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
|
||||
display: var(--occupants-features-display); }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
|
||||
padding: 0; }
|
||||
|
@ -11393,7 +11498,7 @@ body.reset {
|
|||
overflow-y: auto;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid lightgrey; }
|
||||
border-bottom: var(--occupants-border-bottom); }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
|
||||
cursor: default;
|
||||
|
@ -11476,12 +11581,12 @@ body.reset {
|
|||
margin: 0 0.5em; }
|
||||
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
|
||||
background-color: var(--chatroom-head-color); }
|
||||
background-color: var(--chatroom-head-button-color); }
|
||||
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
|
||||
background-color: white;
|
||||
border-top: 4px solid var(--chatroom-head-color);
|
||||
color: var(--chatroom-head-color); }
|
||||
border-top: var(--message-input-border-top);
|
||||
color: var(--message-input-color); }
|
||||
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fas, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fas:hover,
|
||||
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .far, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .far:hover,
|
||||
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
|
||||
|
@ -11491,16 +11596,16 @@ body.reset {
|
|||
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .far:hover,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
|
||||
color: var(--chatroom-head-color); }
|
||||
color: var(--message-input-color); }
|
||||
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-textarea {
|
||||
border-bottom-right-radius: 0; }
|
||||
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea.correcting,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-textarea.correcting {
|
||||
background-color: var(--chatroom-head-color-lighten-30-percent); }
|
||||
background-color: var(--chatroom-correcting-color); }
|
||||
#conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
|
||||
#conversejs .chatroom .sendXMPPMessage .send-button {
|
||||
background-color: var(--chatroom-head-color); }
|
||||
background-color: var(--message-input-color); }
|
||||
#conversejs.converse-embedded .chatroom .room-invite,
|
||||
#conversejs .chatroom .room-invite {
|
||||
padding-bottom: 1em; }
|
||||
|
@ -11635,7 +11740,8 @@ body.reset {
|
|||
text-align: center;
|
||||
z-index: 0; }
|
||||
#conversejs .message.date-separator .separator {
|
||||
border: 0.5px solid var(--chat-head-color);
|
||||
border-top: 0px;
|
||||
border-bottom: var(--chat-separator-border-bottom);
|
||||
margin: 0 1em;
|
||||
position: relative;
|
||||
top: 1em;
|
||||
|
@ -11643,7 +11749,7 @@ body.reset {
|
|||
#conversejs .message.date-separator .separator-text {
|
||||
background: white;
|
||||
bottom: 1px;
|
||||
color: var(--message-text-color);
|
||||
color: var(--separator-text-color);
|
||||
display: inline-block;
|
||||
line-height: 2em;
|
||||
padding: 0 1em;
|
||||
|
@ -11689,9 +11795,9 @@ body.reset {
|
|||
#conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
|
||||
opacity: 1; }
|
||||
#conversejs .message.chat-msg.correcting.groupchat {
|
||||
background-color: var(--chatroom-head-color-lighten-30-percent); }
|
||||
background-color: var(--chatroom-correcting-color); }
|
||||
#conversejs .message.chat-msg.correcting:not(.groupchat) {
|
||||
background-color: var(--chat-head-color-lighten-50-percent); }
|
||||
background-color: var(--chat-correcting-color); }
|
||||
#conversejs .message.chat-msg .spoiler {
|
||||
margin-top: 0.5em; }
|
||||
#conversejs .message.chat-msg .spoiler-hint {
|
||||
|
@ -11810,7 +11916,8 @@ body.reset {
|
|||
-webkit-animation: colorchange-chatmessage-muc 1s; }
|
||||
|
||||
#conversejs .chatroom-body .message .separator {
|
||||
border: 0.5px solid var(--chatroom-head-color); }
|
||||
border-top: 0px;
|
||||
border-bottom: var(--chatroom-separator-border-bottom); }
|
||||
|
||||
#conversejs.converse-overlayed .message.chat-msg.chat-msg--followup .chat-msg__content {
|
||||
margin-left: 0; }
|
||||
|
|
|
@ -152,13 +152,17 @@
|
|||
}
|
||||
}
|
||||
.chat-title {
|
||||
display: var(--heading-display);
|
||||
font-family: var(--heading-font);
|
||||
color: white;
|
||||
color: var(--heading-color);
|
||||
display: block;
|
||||
line-height: var(--line-height-large);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&.groupchat {
|
||||
padding-right: var(--chatroom-head-title-padding-right);
|
||||
}
|
||||
a {
|
||||
color: var(--chat-head-text-color);
|
||||
width: 100%;
|
||||
|
@ -260,6 +264,7 @@
|
|||
|
||||
.chat-textarea {
|
||||
color: var(--chat-textarea-color);
|
||||
background-color: var(--chat-textarea-background-color);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-radius: var(--chatbox-border-radius);
|
||||
|
@ -273,7 +278,7 @@
|
|||
height: 42px;
|
||||
}
|
||||
&.correcting {
|
||||
background-color: var(--chat-head-color-lighten-50-percent);
|
||||
background-color: var(--chat-correcting-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -34,9 +34,11 @@
|
|||
|
||||
.chat-head-chatroom {
|
||||
background-color: var(--chatroom-head-color);
|
||||
border-bottom: var(--chatroom-head-border-bottom);
|
||||
|
||||
.chatroom-description {
|
||||
color: var(--chatroom-head-color-lighten-25-percent);
|
||||
color: var(--chatroom-head-description-color);
|
||||
display: var(--chatroom-head-description-display);
|
||||
font-size: var(--font-size);
|
||||
font-size: 70%;
|
||||
margin-top: 3px;
|
||||
|
@ -44,8 +46,10 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
border-left: var(--chatroom-head-description-border-left);
|
||||
padding-left: var(--chatroom-head-description-padding-left);
|
||||
a {
|
||||
color: white;
|
||||
color: var(--chatroom-head-description-link-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -54,7 +58,7 @@
|
|||
&.fa {
|
||||
color: var(--chat-head-text-color);
|
||||
&.button-on:before {
|
||||
color: var(--chatroom-head-color);
|
||||
color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -62,10 +66,13 @@
|
|||
|
||||
.chatbox-btn {
|
||||
&.button-on:before {
|
||||
color: var(--chatroom-head-color);
|
||||
color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
.chat-title {
|
||||
display: var(--heading-display);
|
||||
font-weight: var(--chatroom-head-title-font-weight);
|
||||
padding-right: var(--chatroom-head-title-padding-right);
|
||||
.chatroom-jid {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
@ -109,10 +116,12 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
.chat-topic {
|
||||
display: var(--chat-topic-display);
|
||||
font-weight: bold;
|
||||
color: var(--chatroom-head-color);
|
||||
}
|
||||
.chat-info {
|
||||
display: var(--chat-info-display);
|
||||
color: var(--chatroom-head-color);
|
||||
line-height: normal;
|
||||
&.badge {
|
||||
|
@ -144,10 +153,11 @@
|
|||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
vertical-align: top;
|
||||
background-color: white;
|
||||
border-left: 1px solid var(--text-color);
|
||||
background-color: var(--occupants-background-color);
|
||||
border-left: var(--occupants-border-left);
|
||||
border-bottom-right-radius: var(--chatbox-border-radius);
|
||||
padding: 0.5em;
|
||||
max-width: var(--occupants-max-width);
|
||||
|
||||
.occupants-header {
|
||||
display: flex;
|
||||
|
@ -160,6 +170,9 @@
|
|||
.occupants-heading {
|
||||
font-family: var(--heading-font);
|
||||
}
|
||||
.chatroom-features {
|
||||
display: var(--occupants-features-display);
|
||||
}
|
||||
.awesomplete {
|
||||
ul {
|
||||
padding: 0;
|
||||
|
@ -179,7 +192,7 @@
|
|||
overflow-y: auto;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
border-bottom: var(--occupants-border-bottom);
|
||||
}
|
||||
li {
|
||||
cursor: default;
|
||||
|
@ -269,7 +282,7 @@
|
|||
margin: 0 0.5em;
|
||||
}
|
||||
.button-primary {
|
||||
background-color: var(--chatroom-head-color);
|
||||
background-color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -278,22 +291,22 @@
|
|||
.sendXMPPMessage {
|
||||
.chat-toolbar {
|
||||
background-color: white;
|
||||
border-top: 4px solid var(--chatroom-head-color);
|
||||
color: var(--chatroom-head-color);
|
||||
border-top: var(--message-input-border-top);
|
||||
color: var(--message-input-color);
|
||||
.fas, .fas:hover,
|
||||
.far, .far:hover,
|
||||
.fa, .fa:hover {
|
||||
color: var(--chatroom-head-color);
|
||||
color: var(--message-input-color);
|
||||
}
|
||||
}
|
||||
.chat-textarea {
|
||||
border-bottom-right-radius: 0;
|
||||
&.correcting {
|
||||
background-color: var(--chatroom-head-color-lighten-30-percent);
|
||||
background-color: var(--chatroom-correcting-color);
|
||||
}
|
||||
}
|
||||
.send-button {
|
||||
background-color: var(--chatroom-head-color);
|
||||
background-color: var(--message-input-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -215,6 +215,8 @@
|
|||
|
||||
.controlbox-heading {
|
||||
font-family: var(--heading-font);
|
||||
color: var(--controlbox-heading-color);
|
||||
font-weight: var(--controlbox-heading-font-weight);
|
||||
padding: 0;
|
||||
margin: 0.75em 0;
|
||||
font-size: 1.1em;
|
||||
|
@ -282,7 +284,7 @@
|
|||
.controlbox-panes {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: white;
|
||||
background-color: var(--controlbox-pane-background-color);
|
||||
}
|
||||
|
||||
.controlbox-subtitle {
|
||||
|
@ -292,7 +294,7 @@
|
|||
}
|
||||
|
||||
.controlbox-pane {
|
||||
background-color: white;
|
||||
background-color: var(--controlbox-pane-background-color);
|
||||
border: 0;
|
||||
font-size: var(--font-size);
|
||||
left: 0;
|
||||
|
|
|
@ -447,9 +447,9 @@ body.reset {
|
|||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 10%;
|
||||
border: 1px solid lightgrey;
|
||||
background: white;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
border: var(--avatar-border);
|
||||
background-color: var(--avatar-background-color);
|
||||
}
|
||||
|
||||
.activated {
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
.list-toggle {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: var(--list-toggle-font-weight);
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
padding: 0 0 0.5rem 0;
|
||||
|
@ -29,8 +30,9 @@
|
|||
word-wrap: break-word;
|
||||
|
||||
.list-item-link {
|
||||
color: var(--list-item-link-color);
|
||||
&:hover {
|
||||
color: var(--dark-link-color);
|
||||
color: var(--list-item-link-hover-color);
|
||||
}
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--font-size);
|
||||
|
@ -50,9 +52,9 @@
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
&.button-on {
|
||||
color: var(--link-color);
|
||||
color: var(--list-item-link-color);
|
||||
&:hover {
|
||||
color: var(--dark-link-color);
|
||||
color: var(--list-item-link-hover-color);
|
||||
}
|
||||
}
|
||||
color: var(--subdued-color);
|
||||
|
@ -63,9 +65,9 @@
|
|||
}
|
||||
|
||||
&.open {
|
||||
background-color: var(--controlbox-head-color);
|
||||
background-color: var(--list-item-open-color);
|
||||
&:hover {
|
||||
background-color: var(--controlbox-head-color) !important;
|
||||
background-color: var(--list-item-open-hover-color) !important;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
|
|
|
@ -14,7 +14,8 @@
|
|||
z-index: 0;
|
||||
|
||||
.separator {
|
||||
border: 0.5px solid var(--chat-head-color);
|
||||
border-top: 0px;
|
||||
border-bottom: var(--chat-separator-border-bottom);
|
||||
margin: 0 1em;
|
||||
position: relative;
|
||||
top: 1em;
|
||||
|
@ -24,7 +25,7 @@
|
|||
.separator-text {
|
||||
background: white;
|
||||
bottom: 1px; // Offset needed due to .separator border size
|
||||
color: var(--message-text-color);
|
||||
color: var(--separator-text-color);
|
||||
display: inline-block;
|
||||
line-height: 2em;
|
||||
padding: 0 1em;
|
||||
|
@ -86,10 +87,10 @@
|
|||
}
|
||||
&.correcting {
|
||||
&.groupchat {
|
||||
background-color: var(--chatroom-head-color-lighten-30-percent);
|
||||
background-color: var(--chatroom-correcting-color);
|
||||
}
|
||||
&:not(.groupchat) {
|
||||
background-color: var(--chat-head-color-lighten-50-percent);
|
||||
background-color: var(--chat-correcting-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -269,7 +270,8 @@
|
|||
-webkit-animation: colorchange-chatmessage-muc 1s;
|
||||
}
|
||||
.separator {
|
||||
border: 0.5px solid var(--chatroom-head-color);
|
||||
border-top: 0px;
|
||||
border-bottom: var(--chatroom-separator-border-bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,6 +32,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
--save-button-color: #3AA569; // $green
|
||||
|
||||
--chat-textarea-color: #666;
|
||||
--chat-textarea-background-color: white;
|
||||
--chat-textarea-height: 60px;
|
||||
|
||||
--send-button-height: 27px;
|
||||
|
@ -45,6 +46,10 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
--chat-head-color: #3AA569; // $green
|
||||
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
|
||||
--chat-head-text-color: white;
|
||||
--chat-correcting-color: var(--chat-head-color-lighten-50-percent);
|
||||
|
||||
--chat-topic-display: block;
|
||||
--chat-info-display: block;
|
||||
|
||||
--highlight-color: #DCF9F6;
|
||||
|
||||
|
@ -71,6 +76,9 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
--controlbox-width: 250px;
|
||||
--controlbox-head-color: #578EA9; // $light-blue
|
||||
--controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
|
||||
--controlbox-pane-background-color: white;
|
||||
--controlbox-heading-color: inherit;
|
||||
--controlbox-heading-font-weight: normal;
|
||||
|
||||
--chat-gutter: 0.5em;
|
||||
--minimized-chats-width: 130px;
|
||||
|
@ -83,11 +91,22 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
|
||||
--normal-font: "Helvetica", "Arial", sans-serif;
|
||||
--heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
|
||||
--heading-display: block;
|
||||
--heading-color: white;
|
||||
|
||||
--chatroom-head-color: #E77051; // $red
|
||||
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
|
||||
--chatroom-head-color-lighten-30-percent: #fadfd7; // lighten($red, 30%)
|
||||
--chatroom-head-button-color: var(--chatroom-head-color);
|
||||
--chatroom-head-title-font-weight: normal;
|
||||
--chatroom-head-title-padding-right: 0px;
|
||||
--chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent);
|
||||
--chatroom-head-description-link-color: white;
|
||||
--chatroom-head-description-display: block;
|
||||
--chatroom-head-description-border-left: 0px;
|
||||
--chatroom-head-description-padding-left: 0px;
|
||||
--chatroom-head-border-bottom: 0px;
|
||||
--chatroom-width: 400px;
|
||||
--chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
|
||||
|
||||
--headline-head-color: #E7A151; // $orange
|
||||
--headline-message-color: #D2842B; // $dark-orange
|
||||
|
@ -102,6 +121,12 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
--font-size-huge: 20px;
|
||||
|
||||
--message-font-size: var(--font-size);
|
||||
--separator-text-color: var(--message-text-color);
|
||||
--chat-separator-border-bottom: 2px solid var(--chat-head-color);
|
||||
--chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color);
|
||||
|
||||
--message-input-border-top: 4px solid var(--chatroom-head-color);
|
||||
--message-input-color: var(--chatroom-head-color);
|
||||
|
||||
--line-height-small: 14px;
|
||||
--line-height: 16px;
|
||||
|
@ -109,9 +134,18 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
--line-height-huge: 27px;
|
||||
|
||||
--occupants-padding: 1em;
|
||||
--occupants-background-color: white;
|
||||
--occupants-max-width: inherit;
|
||||
--occupants-border-left: 1px solid var(--text-color);
|
||||
--occupants-border-bottom: 1px solid lightgrey;
|
||||
--occupants-features-display: block;
|
||||
|
||||
--embedded-emoji-picker-height: 200px;
|
||||
|
||||
--avatar-border-radius: 10%;
|
||||
--avatar-border: 1px solid lightgrey;
|
||||
--avatar-background-color: white;
|
||||
|
||||
--fullpage-chat-head-height: 62px;
|
||||
--fullpage-chat-height: 100vh;
|
||||
--fullpage-chat-width: 100%;
|
||||
|
@ -128,8 +162,70 @@ $font-path: "webfonts/icomoon/fonts/" !default;
|
|||
|
||||
--list-toggle-color: #585B51; // $dark-gray-color
|
||||
--list-toggle-hover-color: #818479; // $gray-color
|
||||
--list-toggle-font-weight: normal;
|
||||
--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
|
||||
--list-item-link-color: inherit;
|
||||
--list-item-link-hover-color: var(--dark-link-color);
|
||||
--list-item-open-color: var(--controlbox-head-color);
|
||||
--list-item-open-hover-color: var(--controlbox-head-color);
|
||||
--list-circle-color: #89d6ab; // lighten($green, 25%)
|
||||
--list-minus-circle-color: #f0a794; // lighten($red, 15%)
|
||||
--list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
|
||||
}
|
||||
|
||||
#conversejs.theme-dark {
|
||||
--avatar-border-radius: 100%;
|
||||
--avatar-border: 0px;
|
||||
--avatar-background-color: none;
|
||||
|
||||
--controlbox-pane-background-color: #333;
|
||||
--controlbox-heading-color: #777;
|
||||
--controlbox-heading-font-weight: bold;
|
||||
|
||||
--chat-topic-display: none;
|
||||
--chat-info-display: none;
|
||||
--chat-textarea-background-color: #F6F6F6;
|
||||
--chat-correcting-color: #FFFFC0;
|
||||
--chat-head-text-color: #999;
|
||||
|
||||
--chatbox-border-radius: 0px;
|
||||
|
||||
--heading-display: inline;
|
||||
--heading-color: #4F545C;
|
||||
|
||||
--chatroom-head-color: white;
|
||||
--chatroom-head-color-lighten-25-percent: blue;
|
||||
--chatroom-head-button-color: #999;
|
||||
--chatroom-head-title-font-weight: bold;
|
||||
--chatroom-head-title-padding-right: 12px;
|
||||
--chatroom-head-description-color: black;
|
||||
--chatroom-head-description-link-color: #00b3f4;
|
||||
--chatroom-head-description-display: inline;
|
||||
--chatroom-head-description-border-left: 1px solid #DDD;
|
||||
--chatroom-head-description-padding-left: 12px;
|
||||
--chatroom-head-border-bottom: 1px solid #EEE;
|
||||
--chatroom-correcting-color: #FFFFC0;
|
||||
|
||||
--occupants-background-color: #F3F3F3;
|
||||
/* TODO: find a way to allow that and reflow the chat-area properly.
|
||||
* --occupants-max-width: 240px; */
|
||||
--occupants-border-left: 0px;
|
||||
--occupants-border-bottom: 0px;
|
||||
--occupants-features-display: none;
|
||||
|
||||
--separator-text-color: #AAA;
|
||||
--chat-separator-border-bottom: 1px solid #AAA;
|
||||
--chatroom-separator-border-bottom: 1px solid #AAA;
|
||||
|
||||
--message-input-border-top: 1px solid #CCC;
|
||||
--message-input-color: #CCC;
|
||||
|
||||
--fullpage-chat-head-height: 40px;
|
||||
--fullpage-chatbox-button-size: 24px;
|
||||
|
||||
--list-toggle-font-weight: bold;
|
||||
--list-item-link-color: #F1F1F1;
|
||||
--list-item-link-hover-color: #DDD;
|
||||
--list-item-open-color: #444;
|
||||
--list-item-open-hover-color: #444;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user