Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Reuse CSS variables

Browse Source
This commit is contained in:
JC Brand 2019-03-27 14:28:47 +01:00
parent e3468b3c41
commit ae4111b17b
2 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/converse.css
View File

@ -9302,14 +9302,18 @@ readers do not read off random characters that represent icons */
#conversejs, #conversejs-bg, .converse-fullscreen {
--subdued-color: #A8ABA1;
--subdued-color-lighten-25-percent: #e6e7e4;
--chat-status-online: #3AA569;
--chat-status-busy: #E77051;
--chat-status-away: #E7A151;
--green: #3AA569;
--redder-orange: #E77051;
--orange: #E7A151;
--light-blue: #578EA9;
--chat-status-online: var(--green);
--chat-status-busy: var(--redder-orange);
--chat-status-away: var(--orange);
--brand-heading-color: #387592;
--completion-light-color: #FFB9A7;
--completion-normal-color: #E77051;
--completion-normal-color: var(--redder-orange);
--completion-dark-color: #D24E2B;
--link-color: #578EA9;
--link-color: var(--light-blue);
--link-color-darken-20-percent: #345566;
--link-color-lighten-10-percent: #79a5ba;
--dark-link-color: #206485;
@ -9319,8 +9323,8 @@ readers do not read off random characters that represent icons */
--text-color: #666;
--text-color-lighten-15-percent: #8c8c8c;
--message-text-color: #555;
--message-receipt-color: #3AA569;
--save-button-color: #3AA569;
--message-receipt-color: var(--green);
--save-button-color: var(--green);
--message-avatar-width: 36px;
--message-avatar-height: 36px;
--chat-textarea-color: #666;
@ -9332,7 +9336,7 @@ readers do not read off random characters that represent icons */
--inline-action-margin: 0.75em;
--roster-height: 194px;
--flyout-padding: 1.2em;
--chat-head-color: #3AA569;
--chat-head-color: var(--green);
--chat-head-color-dark: #1E9652;
--chat-head-color-darker: #0E763B;
--chat-head-color-lighten-50-percent: #e7f7ee;
@ -9341,11 +9345,11 @@ readers do not read off random characters that represent icons */
--chat-topic-display: block;
--chat-info-display: block;
--highlight-color: #DCF9F6;
--primary-color: #578EA9;
--primary-color: var(--light-blue);
--primary-color-dark: #397491;
--secondary-color: #818479;
--secondary-color-dark: #585B51;
--warning-color: #E7A151;
--warning-color: var(--orange);
--warning-color-dark: #D2842B;
--danger-color: #D24E2B;
--danger-color-dark: #A93415;
@ -9355,7 +9359,7 @@ readers do not read off random characters that represent icons */
--button-border-radius: 5px;
--chatbox-border-radius: 4px;
--controlbox-width: 250px;
--controlbox-head-color: #578EA9;
--controlbox-head-color: var(--light-blue);
--controlbox-head-color-lighten-45-percent: #eff4f7;
--controlbox-pane-background-color: white;
--controlbox-heading-color: inherit;
@ -9369,7 +9373,7 @@ readers do not read off random characters that represent icons */
--branding-font: 'Baumans', cursive;
--heading-display: block;
--heading-color: white;
--chatroom-head-color: #E77051;
--chatroom-head-color: var(--redder-orange);
--chatroom-head-color-dark: #D24E2B;
--chatroom-head-color-lighten-25-percent: #f6ccc1;
--chatroom-head-button-color: var(--chatroom-head-color);
@ -9385,7 +9389,7 @@ readers do not read off random characters that represent icons */
--chatroom-correcting-color: #fadfd7;
--chatroom-badge-color: var(--chatroom-head-color);
--chatroom-badge-hover-color: var(--chatroom-head-color-dark);
--headline-head-color: #E7A151;
--headline-head-color: var(--orange);
--headline-message-color: #D2842B;
--chatbox-button-size: 14px;
--fullpage-chatbox-button-size: 16px;
@ -9465,7 +9469,7 @@ readers do not read off random characters that represent icons */
--chatroom-head-description-padding-left: 12px;
--chatroom-head-border-bottom: 1px solid #EEE;
--chatroom-correcting-color: #FFFFC0;
--chatroom-badge-color: #E77051;
--chatroom-badge-color: var(--redder-orange);
--chatroom-badge-hover-color: #D24E2B;
--occupants-background-color: #F3F3F3;
/* TODO: find a way to allow that and reflow the chat-area properly.

33
sass/_variables.scss
View File

@ -5,17 +5,22 @@ $mobile_portrait_length: 480px !default;
--subdued-color: #A8ABA1;
--subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
--chat-status-online: #3AA569; // $green
--chat-status-busy: #E77051; // $red
--chat-status-away: #E7A151; // $orange
--green: #3AA569;
--redder-orange: #E77051;
--orange: #E7A151;
--light-blue: #578EA9;
--chat-status-online: var(--green);
--chat-status-busy: var(--redder-orange);
--chat-status-away: var(--orange);
--brand-heading-color: #387592; // $blue
--completion-light-color: #FFB9A7; // $lightest-red
--completion-normal-color: #E77051; // $red
--completion-normal-color: var(--redder-orange);
--completion-dark-color: #D24E2B; // $dark-red
--link-color: #578EA9; // $light-blue
--link-color: var(--light-blue);
--link-color-darken-20-percent: #345566; // darken($light-blue, 20%)
--link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
--dark-link-color: #206485; // $dark-blue
@ -26,8 +31,8 @@ $mobile_portrait_length: 480px !default;
--text-color: #666;
--text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
--message-text-color: #555;
--message-receipt-color: #3AA569; // $green
--save-button-color: #3AA569; // $green
--message-receipt-color: var(--green);
--save-button-color: var(--green);
--message-avatar-width: 36px;
--message-avatar-height: 36px;
@ -46,7 +51,7 @@ $mobile_portrait_length: 480px !default;
--flyout-padding: 1.2em;
--chat-head-color: #3AA569; // $green
--chat-head-color: var(--green);
--chat-head-color-dark: #1E9652;
--chat-head-color-darker: #0E763B;
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
@ -58,13 +63,13 @@ $mobile_portrait_length: 480px !default;
--highlight-color: #DCF9F6;
--primary-color: #578EA9; // blue
--primary-color: var(--light-blue);
--primary-color-dark: #397491;
--secondary-color: #818479; // gray
--secondary-color-dark: #585B51;
--warning-color: #E7A151; // orange
--warning-color: var(--orange);
--warning-color-dark: #D2842B;
--danger-color: #D24E2B; // dark-red
@ -79,7 +84,7 @@ $mobile_portrait_length: 480px !default;
--chatbox-border-radius: 4px;
--controlbox-width: 250px;
--controlbox-head-color: #578EA9; // $light-blue
--controlbox-head-color: var(--light-blue);
--controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
--controlbox-pane-background-color: white;
--controlbox-heading-color: inherit;
@ -100,7 +105,7 @@ $mobile_portrait_length: 480px !default;
--heading-display: block;
--heading-color: white;
--chatroom-head-color: #E77051; // $orange
--chatroom-head-color: var(--redder-orange);
--chatroom-head-color-dark: #D24E2B; // $red
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
--chatroom-head-button-color: var(--chatroom-head-color);
@ -117,7 +122,7 @@ $mobile_portrait_length: 480px !default;
--chatroom-badge-color: var(--chatroom-head-color);
--chatroom-badge-hover-color: var(--chatroom-head-color-dark);
--headline-head-color: #E7A151; // $orange
--headline-head-color: var(--orange);
--headline-message-color: #D2842B;
--chatbox-button-size: 14px;
@ -214,7 +219,7 @@ $mobile_portrait_length: 480px !default;
--chatroom-head-description-padding-left: 12px;
--chatroom-head-border-bottom: 1px solid #EEE;
--chatroom-correcting-color: #FFFFC0;
--chatroom-badge-color: #E77051; // $orange
--chatroom-badge-color: var(--redder-orange);
--chatroom-badge-hover-color: #D24E2B; // $red
--occupants-background-color: #F3F3F3;