_variables.scss 8.07 KB
Newer Older
1 2 3
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;

4
#conversejs, #conversejs-bg, .converse-fullscreen {
5
    --subdued-color: #A8ABA1;
6

JC Brand's avatar
JC Brand committed
7 8 9 10 11 12 13 14
    --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);
JC Brand's avatar
JC Brand committed
15

16
    --brand-heading-color: #387592; // $blue
17

18
    --completion-light-color: #FFB9A7; // $lightest-red
JC Brand's avatar
JC Brand committed
19
    --completion-normal-color: var(--redder-orange);
20
    --completion-dark-color: #D24E2B; // $dark-red
21

JC Brand's avatar
JC Brand committed
22
    --link-color: var(--light-blue);
23 24 25
    --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
    --global-background-color: #397491; // dark blue
27 28 29 30 31 32

    --inverse-link-color: white;
    --text-shadow-color: #FAFAFA;
    --text-color: #666;
    --text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
    --message-text-color: #555;
JC Brand's avatar
JC Brand committed
33 34
    --message-receipt-color: var(--green);
    --save-button-color: var(--green);
35

36 37 38
    --message-avatar-width: 36px;
    --message-avatar-height: 36px;

39
    --chat-textarea-color: #666;
40
    --chat-textarea-background-color: white;
41 42 43 44 45
    --chat-textarea-height: 60px;

    --send-button-height: 27px;
    --send-button-margin: 3px;

46
	--controlbox-heading-top-margin: 0.75em;
47 48
	--inline-action-margin: 0.75em;

49 50 51 52
    --roster-height: 194px;

    --flyout-padding: 1.2em;

JC Brand's avatar
JC Brand committed
53
    --chat-head-color: var(--green);
54 55
    --chat-head-color-dark: #1E9652;
    --chat-head-color-darker: #0E763B;
56 57
    --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
    --chat-head-text-color: white;
58 59 60 61
    --chat-correcting-color: var(--chat-head-color-lighten-50-percent);

    --chat-topic-display: block;
    --chat-info-display: block;
62 63 64

    --highlight-color: #DCF9F6;

JC Brand's avatar
JC Brand committed
65
    --primary-color: var(--light-blue);
66
    --primary-color-dark:  #397491;
67

68 69 70
    --secondary-color: #818479; // gray
    --secondary-color-dark: #585B51;

JC Brand's avatar
JC Brand committed
71
    --warning-color: var(--orange);
72 73 74 75
    --warning-color-dark: #D2842B;

    --danger-color: #D24E2B; // dark-red
    --danger-color-dark: #A93415; // darker red
76 77 78

    --light-background-color: #FCFDFD;

JC Brand's avatar
JC Brand committed
79
    --error-color: #D24E2B; // dark-red
80 81 82 83 84 85
    --info-color: #1E9652; // $dark-green

    --button-border-radius: 5px;
    --chatbox-border-radius: 4px;

    --controlbox-width: 250px;
JC Brand's avatar
JC Brand committed
86
    --controlbox-head-color: var(--light-blue);
87
    --controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
88 89
    --controlbox-pane-background-color: white;
    --controlbox-heading-color: inherit;
JC Brand's avatar
JC Brand committed
90
    --controlbox-heading-font-weight: bold;
91 92 93 94 95 96 97 98 99

    --chat-gutter: 0.5em;
    --minimized-chats-width: 130px;

    --mobile-chat-width: 100%;
    --mobile-chat-height: 400px;

    // TODO: figure out a way to concatenate custom properties with strings.
    // --font-path: "webfonts/icomoon/fonts/";
100

101
    --normal-font: "Helvetica", "Arial", sans-serif;
JC Brand's avatar
JC Brand committed
102 103
    --heading-font: 'Muli', normal;
    --branding-font: 'Baumans', cursive;
104 105
    --heading-display: block;
    --heading-color: white;
JC Brand's avatar
JC Brand committed
106

JC Brand's avatar
JC Brand committed
107
    --chatroom-head-color: var(--redder-orange);
108
    --chatroom-head-color-dark: #D24E2B; // $red
109
    --chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
110 111 112 113 114 115 116 117 118
    --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;
119
    --chatroom-width: 400px;
120
    --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
121 122
    --chatroom-badge-color: var(--chatroom-head-color);
    --chatroom-badge-hover-color: var(--chatroom-head-color-dark);
123

JC Brand's avatar
JC Brand committed
124
    --headline-head-color: var(--orange);
125
    --headline-message-color: #D2842B;
126

127 128
    --chatbox-button-size: 14px;
    --fullpage-chatbox-button-size: 16px;
129

130 131 132 133 134
    --font-size-tiny: 10px;
    --font-size-small: 12px;
    --font-size: 14px;
    --font-size-large: 16px;
    --font-size-huge: 20px;
135

136
    --message-font-size: var(--font-size);
137 138 139 140 141 142
    --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);
143

144 145 146 147
    --line-height-small: 14px;
    --line-height: 16px;
    --line-height-large: 20px;
    --line-height-huge: 27px;
148

149
    --occupants-padding: 1em;
150 151 152 153 154
    --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;
155

156
    --embedded-emoji-picker-height: 200px;
157

158 159 160 161
    --avatar-border-radius: 10%;
    --avatar-border: 1px solid lightgrey;
    --avatar-background-color: white;

162
    --fullpage-chat-head-height: 62px;
163
    --fullpage-chat-height: calc(var(--vh, 1vh) * 100);
164 165 166
    --fullpage-chat-width: 100%;
    --fullpage-emoji-picker-height: 200px;
    --fullpage-max-chat-textarea-height: 15em;
167

168 169 170 171 172 173 174
    --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; // $gray-color
175

176 177
    --list-toggle-color: #818479; // $gray-color
    --list-toggle-hover-color: #585B51; // $dark-gray-color
178
    --list-toggle-font-weight: normal;
179
    --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
180 181 182 183
    --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);
184 185
    --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
}
186

187
#conversejs.theme-concord {
188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
    --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;
JC Brand's avatar
JC Brand committed
219
    --chatroom-badge-color: var(--redder-orange);
220
    --chatroom-badge-hover-color: #D24E2B; // $red
221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244

    --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;
}