diff options
author | Aman9das <Aman9das@users.noreply.github.com> | 2021-11-23 21:18:42 +0530 |
---|---|---|
committer | Vijay A <vraravam@users.noreply.github.com> | 2021-11-23 21:26:03 +0530 |
commit | b5266ada66a1c8a2409f5ca6c7de2fda968420fa (patch) | |
tree | d9503d529caef339c9ed787dabe83070871b7e2a /recipes/xmpp/darkmode.css | |
parent | Fixing issue with 'toggl' recipe exposed by the pre-commit hook (diff) | |
download | ferdium-recipes-b5266ada66a1c8a2409f5ca6c7de2fda968420fa.tar.gz ferdium-recipes-b5266ada66a1c8a2409f5ca6c7de2fda968420fa.tar.zst ferdium-recipes-b5266ada66a1c8a2409f5ca6c7de2fda968420fa.zip |
add new 'xmpp' service recipe
Diffstat (limited to 'recipes/xmpp/darkmode.css')
-rw-r--r-- | recipes/xmpp/darkmode.css | 365 |
1 files changed, 365 insertions, 0 deletions
diff --git a/recipes/xmpp/darkmode.css b/recipes/xmpp/darkmode.css new file mode 100644 index 0000000..24413dc --- /dev/null +++ b/recipes/xmpp/darkmode.css | |||
@@ -0,0 +1,365 @@ | |||
1 | /* ==UserStyle== | ||
2 | @name Converse Dark | ||
3 | @description A dark theme for the full screen version of Converse, a web-based XMPP client. | ||
4 | @namespace gitlab.com/maxigaz/converse-dark | ||
5 | @author maxigaz | ||
6 | @homepageURL https://gitlab.com/maxigaz/converse-dark | ||
7 | @version 1.0.2 | ||
8 | ==/UserStyle== */ | ||
9 | |||
10 | @-moz-document domain("inverse.chat"), url-prefix("https://conversejs.org/fullscreen") | ||
11 | { | ||
12 | :root { | ||
13 | --main-background: #383c4a; | ||
14 | --lighter-background-1: #3f4353; | ||
15 | --darker-background-1: #323542; | ||
16 | |||
17 | --main-text-color: #e4e4e4; | ||
18 | --lighter-text-color-1: #e7e7e7; | ||
19 | --lighter-text-color-2: #eee; | ||
20 | --lighter-text-color-3: #f4f4f4; | ||
21 | --lighter-text-color-4: #f7f7f7; | ||
22 | --lighter-text-color-5: #fff; | ||
23 | --darker-text-color-1: #eee; | ||
24 | --darker-text-color-3: #ddd; | ||
25 | --darker-text-color-2: #d4d4d4; | ||
26 | --darker-text-color-4: #c7c7c7; | ||
27 | --darker-text-color-5: #bababa; | ||
28 | |||
29 | --selected-text-background: #595e70; | ||
30 | |||
31 | --light-divider: #404555; | ||
32 | --main-border: #292c36; | ||
33 | --btn-border: #1b1b1b; | ||
34 | |||
35 | --border-green: #1d5534; | ||
36 | --border-orange: #924633; | ||
37 | |||
38 | --btn-background: #474b5d; | ||
39 | --btn-disabled-background: #464a5c; | ||
40 | --btn-disabled-color: #878787; | ||
41 | |||
42 | --a-text-color: #2596ff; | ||
43 | --a-text-color-hover: #23baff; | ||
44 | } | ||
45 | |||
46 | #conversejs ::selection { | ||
47 | background-color: var(--selected-text-background); | ||
48 | } | ||
49 | |||
50 | /* ===== Sidebar ===== */ | ||
51 | |||
52 | #conversejs #controlbox .controlbox-pane { | ||
53 | background-color: var(--main-background); | ||
54 | } | ||
55 | |||
56 | #conversejs #controlbox .controlbox-panes { | ||
57 | background-color: var(--main-background); | ||
58 | } | ||
59 | |||
60 | #converse-embedded-chat, #conversejs { | ||
61 | color: var(--main-text-color); | ||
62 | } | ||
63 | |||
64 | /* Conferences */ | ||
65 | |||
66 | #conversejs .list-container .list-toggle { | ||
67 | color: var(--main-text-color); | ||
68 | } | ||
69 | |||
70 | #conversejs .list-container .list-toggle:hover { | ||
71 | color: var(--lighter-text-color-5); | ||
72 | } | ||
73 | |||
74 | #conversejs .items-list .list-item:hover { | ||
75 | background-color: var(--lighter-background-1); | ||
76 | } | ||
77 | |||
78 | #conversejs .items-list .list-item .list-item-link { | ||
79 | color: var(--a-text-color); | ||
80 | } | ||
81 | |||
82 | #conversejs .items-list .list-item .list-item-link:hover { | ||
83 | color: var(--a-text-color-hover); | ||
84 | } | ||
85 | |||
86 | #conversejs .items-list .list-item .list-item-action.button-on { | ||
87 | color: var(--a-text-color); | ||
88 | } | ||
89 | |||
90 | #conversejs .items-list .list-item .list-item-action.button-on:hover { | ||
91 | color: var(--a-text-color-hover); | ||
92 | } | ||
93 | |||
94 | #conversejs .items-list .list-item.open { | ||
95 | background-color: #0f4071 !important; | ||
96 | } | ||
97 | |||
98 | #conversejs .items-list .list-item.open:hover { | ||
99 | background-color: #0f4071 !important; | ||
100 | } | ||
101 | |||
102 | #conversejs .message.chat-msg .chat-msg__content--me .chat-msg__body--groupchat.chat-msg__body--delayed .chat-msg__text, #conversejs .message.chat-msg .chat-msg__content--me .chat-msg__body--groupchat.chat-msg__body--received .chat-msg__text { | ||
103 | color: var(--main-text-color); | ||
104 | } | ||
105 | |||
106 | /* Contacts */ | ||
107 | |||
108 | #conversejs #converse-roster .roster-contacts .roster-group .group-toggle { | ||
109 | color: var(--main-text-color); | ||
110 | } | ||
111 | |||
112 | #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover { | ||
113 | color: var(--lighter-text-color-5); | ||
114 | } | ||
115 | |||
116 | #conversejs #converse-roster .roster-contacts .roster-group li:hover { | ||
117 | background-color: var(--lighter-background-1) !important; | ||
118 | } | ||
119 | |||
120 | /* ===== Chat window ===== */ | ||
121 | |||
122 | #converse-embedded-chat .chatbox .chat-content, #conversejs .chatbox .chat-content { | ||
123 | background-color: var(--main-background); | ||
124 | color: var(--lighter-text-color-2); | ||
125 | } | ||
126 | |||
127 | #conversejs .message.chat-msg .chat-msg__text { | ||
128 | color: var(--darker-text-color-2); | ||
129 | } | ||
130 | |||
131 | #conversejs .message.chat-msg .chat-msg__heading .chat-msg__time { | ||
132 | color: var(--darker-text-color-5); | ||
133 | } | ||
134 | |||
135 | #conversejs .message.chat-msg.correcting:not(.groupchat) { | ||
136 | background-color: #464b5d; | ||
137 | } | ||
138 | |||
139 | #conversejs .message.chat-msg.correcting.groupchat { | ||
140 | background-color: #464b5d; | ||
141 | } | ||
142 | |||
143 | #conversejs.converse-fullscreen .flyout { | ||
144 | border-color: var(--border-green); | ||
145 | } | ||
146 | |||
147 | #conversejs.converse-fullscreen .chatbox .box-flyout { | ||
148 | background-color: var(--border-green); | ||
149 | } | ||
150 | |||
151 | #conversejs .chat-head.chat-head-chatbox { | ||
152 | background-color: var(--border-green); | ||
153 | } | ||
154 | |||
155 | #conversejs.converse-fullscreen .chatroom .box-flyout, #conversejs.converse-mobile .chatroom .box-flyout { | ||
156 | background-color: var(--border-orange); | ||
157 | border-color: var(--border-orange); | ||
158 | } | ||
159 | |||
160 | #conversejs .chat-head-chatroom, #conversejs.converse-embedded .chat-head-chatroom { | ||
161 | background-color: var(--border-orange); | ||
162 | } | ||
163 | |||
164 | #conversejs .chat-head a.chatbox-btn.fa.button-on::before, #conversejs .chat-head a.chatbox-btn.far.button-on::before, #conversejs .chat-head a.chatbox-btn.fas.button-on::before, #conversejs .chat-head a:hover.chatbox-btn.fa.button-on::before, #conversejs .chat-head a:hover.chatbox-btn.far.button-on::before, #conversejs .chat-head a:hover.chatbox-btn.fas.button-on::before, #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on::before, #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.far.button-on::before, #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fas.button-on::before, #conversejs .chat-head a:visited.chatbox-btn.fa.button-on::before, #conversejs .chat-head a:visited.chatbox-btn.far.button-on::before, #conversejs .chat-head a:visited.chatbox-btn.fas.button-on::before { | ||
165 | background-color: var(--border-orange); | ||
166 | } | ||
167 | |||
168 | #conversejs .message.date-separator .separator-text { | ||
169 | background-color: var(--main-background); | ||
170 | color: var(--darker-text-color-3); | ||
171 | } | ||
172 | |||
173 | #conversejs .avatar { | ||
174 | background-color: var(--main-background); | ||
175 | border-color: var(--main-border); | ||
176 | } | ||
177 | |||
178 | /* Occupants */ | ||
179 | |||
180 | #conversejs .chatbox .chat-body p { | ||
181 | color: var(--lighter-text-color-2); | ||
182 | } | ||
183 | |||
184 | #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants, #conversejs .chatroom .box-flyout .chatroom-body .occupants { | ||
185 | background-color: var(--main-background); | ||
186 | color: var(--main-text-color); | ||
187 | } | ||
188 | |||
189 | #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { | ||
190 | border-color: var(--light-divider); | ||
191 | } | ||
192 | |||
193 | #conversejs .chatroom .room-invite .invited-contact, #conversejs.converse-embedded .chatroom .room-invite .invited-contact { | ||
194 | border-color: var(--btn-border); | ||
195 | } | ||
196 | |||
197 | #conversejs .form-control:focus { | ||
198 | box-shadow: 0 0 0 .2rem rgba(37, 150, 255,.3); | ||
199 | } | ||
200 | |||
201 | /* Occupant invitation autocomplete */ | ||
202 | |||
203 | #conversejs .awesomplete .suggestion-box__results::before, #conversejs .awesomplete > ul::before, #conversejs .suggestion-box .suggestion-box__results::before, #conversejs .suggestion-box > ul::before { | ||
204 | background-color: var(--lighter-background-1); | ||
205 | } | ||
206 | |||
207 | #conversejs .awesomplete .suggestion-box__results, #conversejs .awesomplete > ul, #conversejs .suggestion-box .suggestion-box__results, #conversejs .suggestion-box > ul { | ||
208 | background: var(--lighter-background-1); | ||
209 | border-color: var(--main-border); | ||
210 | } | ||
211 | |||
212 | /* Chatroom features */ | ||
213 | |||
214 | #conversejs .chatroom-features .features-list .feature .fa, #conversejs.converse-embedded .chatroom-features .features-list .feature .fa { | ||
215 | color: var(--main-text-color); | ||
216 | } | ||
217 | |||
218 | /* Input field */ | ||
219 | |||
220 | #conversejs .chatbox .sendXMPPMessage .chat-textarea { | ||
221 | background-color: var(--main-background); | ||
222 | color: var(--lighter-text-color-2); | ||
223 | } | ||
224 | |||
225 | #conversejs .chatbox .sendXMPPMessage .chat-textarea.correcting { | ||
226 | background-color: #464b5d; | ||
227 | } | ||
228 | |||
229 | #conversejs .chatbox .sendXMPPMessage .chat-toolbar { | ||
230 | background-color: var(--main-background); | ||
231 | border-color: var(--border-green); | ||
232 | } | ||
233 | |||
234 | #conversejs .chatroom .sendXMPPMessage .chat-toolbar, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar { | ||
235 | border-color: var(--border-orange); | ||
236 | } | ||
237 | |||
238 | /* Emoji picker */ | ||
239 | |||
240 | #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu { | ||
241 | background-color: var(--main-background); | ||
242 | } | ||
243 | |||
244 | #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu .emoji-picker-container { | ||
245 | background-color: var(--main-background); | ||
246 | } | ||
247 | |||
248 | #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a { | ||
249 | color: var(--darker-text-color-2); | ||
250 | } | ||
251 | |||
252 | #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover { | ||
253 | color: var(--lighter-text-color-5); | ||
254 | } | ||
255 | |||
256 | #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { | ||
257 | background-color: var(--selected-text-background); | ||
258 | } | ||
259 | |||
260 | /* ===== Modal ===== */ | ||
261 | |||
262 | /* Conference room info */ | ||
263 | |||
264 | #conversejs .modal-content { | ||
265 | background-color: var(--main-background); | ||
266 | } | ||
267 | |||
268 | #conversejs .modal-header { | ||
269 | border-color: var(--light-divider); | ||
270 | } | ||
271 | |||
272 | #conversejs .modal-footer { | ||
273 | border-color: var(--light-divider); | ||
274 | } | ||
275 | |||
276 | #conversejs a, #conversejs a:not([href]):not([tabindex]), #conversejs a:visited { | ||
277 | color: var(--a-text-color); | ||
278 | } | ||
279 | |||
280 | #conversejs a:hover, #conversejs a:not([href]):not([tabindex]):hover, #conversejs a:visited:hover { | ||
281 | color: var(--a-text-color-hover); | ||
282 | } | ||
283 | |||
284 | #conversejs .close { | ||
285 | color: var(--darker-text-color-1); | ||
286 | } | ||
287 | |||
288 | #conversejs .close:hover { | ||
289 | color: var(--lighter-text-color-2); | ||
290 | } | ||
291 | |||
292 | #conversejs .nav-pills .nav-link.active, #conversejs .nav-pills .show > .nav-link { | ||
293 | background-color: #1f78d1; | ||
294 | } | ||
295 | |||
296 | /* Profile */ | ||
297 | |||
298 | #conversejs form.converse-form { | ||
299 | background-color: var(--main-background); | ||
300 | } | ||
301 | |||
302 | #conversejs .form-control { | ||
303 | background-color: var(--darker-background-1); | ||
304 | border-color: var(--btn-border); | ||
305 | color: var(--main-text-color); | ||
306 | } | ||
307 | |||
308 | #conversejs .form-control:focus { | ||
309 | background-color: var(--darker-background-1); | ||
310 | border-color: #1f78d1; | ||
311 | color: var(--main-text-color); | ||
312 | } | ||
313 | |||
314 | #conversejs .btn-primary { | ||
315 | background-color: #1f78d1; | ||
316 | } | ||
317 | |||
318 | #conversejs .btn-primary:hover { | ||
319 | background-color: #2288ed; | ||
320 | } | ||
321 | |||
322 | #conversejs .btn-primary:not(:disabled):not(.disabled).active, #conversejs .btn-primary:not(:disabled):not(.disabled):active, .show > #conversejs .btn-primary.dropdown-toggle { | ||
323 | background-color: #1962ac; | ||
324 | border-color: #1965b0; | ||
325 | } | ||
326 | |||
327 | /* OMEMO */ | ||
328 | |||
329 | #conversejs .list-group-item { | ||
330 | background-color: var(--main-background); | ||
331 | border-color: var(--main-border); | ||
332 | } | ||
333 | |||
334 | #conversejs .list-group-item.active { | ||
335 | background-color: #1f78d1; | ||
336 | border-color: #1f78d1; | ||
337 | } | ||
338 | |||
339 | /* ===== Login page ===== */ | ||
340 | |||
341 | #conversejs form#converse-login, #conversejs form#converse-register { | ||
342 | background-color: var(--main-background); | ||
343 | } | ||
344 | |||
345 | .reset { | ||
346 | background-color: #0f4071; | ||
347 | } | ||
348 | |||
349 | #conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading, #conversejs.converse-mobile #controlbox .brand-heading-container .brand-heading { | ||
350 | color: var(--a-text-color); | ||
351 | } | ||
352 | |||
353 | #conversejs .popover { | ||
354 | background-color: var(--lighter-background-1); | ||
355 | } | ||
356 | |||
357 | #conversejs .popover-header { | ||
358 | background-color: var(--lighter-background-1); | ||
359 | border-color: var(--light-divider); | ||
360 | } | ||
361 | |||
362 | #conversejs .popover-body { | ||
363 | color: var(--main-text-color); | ||
364 | } | ||
365 | } | ||