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