1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
.conversejs, .conversejs-bg, #conversejs-bg, body.converse-fullscreen {
// Theme-defined variables:
--green: #3AA569;
--dark-green: #1E9652;
--blue: #387592;
--dark-blue: #397491;
--redder-orange: #E77051;
--orange: #E7A151;
--light-blue: #578EA9;
--lighter-blue: #eff4f7;
--dark-red: #D24E2B;
--comment: #A8ABA1;
--gray: #818479;
// Base variables
--foreground: #666;
--background: white;
--subdued-color: var(--comment);
--muc-color: var(--redder-orange);
--chat-color: var(--green);
--disabled-color: gray;
--error-color: var(--dark-red);
--focus-color: var(--background);
// ---
--icon-hover-color: var(--text-color);
--info-color: var(--dark-green);
--chat-status-online: var(--green);
--chat-status-busy: var(--redder-orange);
--chat-status-away: var(--orange);
--brand-heading-color: var(--blue); // $blue
--completion-light-color: #FFB9A7; // $lightest-red
--completion-normal-color: var(--redder-orange);
--completion-dark-color: #D24E2B; // $dark-red
--dark-link-color: #206485; // $dark-blue
--inverse-link-color: var(--background);
--link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
--link-color: var(--light-blue);
--link-hover-color: #345566;
--global-background-color: var(--dark-blue);
--modal-background-color: var(--background);
--img-thumbnail-background-color: var(--background);
--img-thumbnail-border-color: #DEE2E6;
--text-shadow-color: #FAFAFA;
--text-color: var(--foreground);
--controlbox-text-color: var(--foreground);
--text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
--message-author-color: var(--text-color);
--text-color-invert: var(--background);
--message-text-color: #555;
--message-receipt-color: var(--green);
--save-button-color: var(--green);
--button-text-color: var(--background);
--button-hover-text-color: var(--background);
--chat-background-color: var(--background);
--chat-textarea-color: var(--foreground);
--chat-textarea-background-color: var(--background);
--chat-textarea-disabled-bg-color: #EEE;
--chat-textarea-height: 60px;
--chat-correcting-color: var(--chat-head-color-lighten-50-percent);
--chat-head-fg-color: var(--background);
--chat-head-color-dark: var(--dark-green);
--chat-head-color-darker: #0E763B;
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
--chat-head-color: var(--green);
--chat-head-text-color: var(--background);
--chat-toolbar-btn-color: var(--green);
--chat-toolbar-btn-disabled-color: gray;
--toolbar-btn-text-color: var(--background);
--chat-content-background-color: var(--background);
--chat-info-color: var(--chatroom-head-bg-color);
--danger-color-dark: #A93415; // darker red
--danger-color: var(--redder-orange); // dark-red
--highlight-color-darker: #B0E8E2;
--highlight-color: #DCF9F6;
--primary-color-dark: var(--dark-blue);
--primary-color: var(--light-blue);
--primary-color-light: var(--lighter-blue);
--secondary-color-dark: #585B51;
--secondary-color: var(--gray);
--warning-color-dark: #D2842B;
--warning-color: var(--orange);
--light-background-color: #FCFDFD;
--groupchats-header-color: var(--chatroom-head-bg-color);
--groupchats-header-color-dark: var(--chatroom-head-bg-color-dark);
--controlbox-width: 250px;
--controlbox-head-color: var(--light-blue);
--controlbox-head-btn-color: var(--light-blue);
--controlbox-heading-color: inherit;
--controlbox-heading-font-weight: bold;
--controlbox-heading-top-margin: 0.75em;
--controlbox-pane-background-color: var(--background);
--controlbox-pane-bg-hover-color: #eff4f7;
--panel-divider-color: #e7e7e7;
// TODO: figure out a way to concatenate custom properties with strings.
// --font-path: "webfonts/icomoon/fonts/";
--heading-display: block;
--heading-color: var(--background);
--badge-color: var(--background);
--chatroom-color: var(--redder-orange);
--chatroom-badge-color: var(--chatroom-head-bg-color);
--chatroom-badge-hover-color: var(--chatroom-head-bg-color-dark);
--chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
--chatroom-head-bg-color-dark: #D24E2B; // $red
--chatroom-head-bg-color: var(--redder-orange);
--chatroom-head-border-bottom: 0px;
--chatroom-head-button-color: var(--chatroom-head-bg-color);
--chatroom-head-color: var(--background);
--chatroom-head-description-display: block;
--chatroom-head-description-link-color: var(--background);
--chatroom-head-fg-color: var(--background);
--chatroom-head-title-font-weight: normal;
--chatroom-head-title-padding-right: 0px;
--muc-toolbar-btn-color: var(--redder-orange);
--muc-toolbar-btn-disabled-color: gray;
--headlines-color: var(--orange);
--headlines-head-text-color: var(--background);
--headlines-head-fg-color: var(--background);
--headlines-head-bg-color: var(--headlines-color);
--headline-message-color: #D2842B;
--headline-separator-border-bottom: 2px solid var(--headlines-color);
--chatbox-button-size: 14px;
--fullpage-chatbox-button-size: 16px;
--separator-text-color: var(--message-text-color);
--chat-separator-border-bottom: 2px solid var(--chat-color);
--chatroom-separator-border-bottom: 2px solid var(--chatroom-head-bg-color);
--chatbox-message-input-border-top: 4px solid var(--chat-head-color);
--chatroom-message-input-border-top: 4px solid var(--chatroom-head-bg-color);
--occupants-background-color: var(--background);
--occupants-border-left: 0.2rem solid var(--panel-divider-color);
--occupants-border-bottom: 1px solid lightgrey;
--fullpage-chat-height: calc(var(--vh, 1vh) * 100);
--fullpage-chat-width: 100%;
--fullpage-emoji-picker-height: 300px;
--fullpage-max-chat-textarea-height: 15em;
--overlayed-badge-color: var(--gray);
--close-color: var(--text-color);
--close-color: #585B51;
--list-toggle-color: var(--gray);
--list-toggle-hover-color: #585B51;
--list-item-hover-color: rgba(0, 0, 0, 0.035);
--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-dot-circle-color: #f6dec1; // lighten($orange, 25%)
--list-item-action-hover-color: var(--inverse-link-color);
--list-group-item-bg-color: var(--background);
--chat-msg-hover-color: var(--list-item-hover-color);
}
|
