diff options
author | 2021-08-12 08:57:54 +0530 | |
---|---|---|
committer | 2021-08-12 08:57:54 +0530 | |
commit | 52ca44b9df4dafcdc0eaa517146638e01fca5449 (patch) | |
tree | 6df3814408495402b7c9a409f94a634b6e25bd73 /recipes/whatsapp/darkmode.css | |
parent | chore: fixed issue with incorrect eslint config (diff) | |
download | ferdium-recipes-52ca44b9df4dafcdc0eaa517146638e01fca5449.tar.gz ferdium-recipes-52ca44b9df4dafcdc0eaa517146638e01fca5449.tar.zst ferdium-recipes-52ca44b9df4dafcdc0eaa517146638e01fca5449.zip |
Enabled darkmode for
Facebook Messenger
Facebook Workplace Chat (Facebook at work)
Slack
Google Calendar
Whatsapp
LinkedIn
Telegram
Instagram
(from: https://github.com/ducfilan/Dark-mode-Franz-Ferdi)
Diffstat (limited to 'recipes/whatsapp/darkmode.css')
-rw-r--r-- | recipes/whatsapp/darkmode.css | 1080 |
1 files changed, 1080 insertions, 0 deletions
diff --git a/recipes/whatsapp/darkmode.css b/recipes/whatsapp/darkmode.css new file mode 100644 index 0000000..639cbf9 --- /dev/null +++ b/recipes/whatsapp/darkmode.css | |||
@@ -0,0 +1,1080 @@ | |||
1 | /* Copied from: https://github.com/ducfilan/Dark-mode-Franz-Ferdi */ | ||
2 | |||
3 | :root:not(#z) { | ||
4 | --teal: var(--ac-0); | ||
5 | --teal-rgb: var(--ac-0-rgb); | ||
6 | --teal-light: var(--ac-1); | ||
7 | --teal-light-rgb: var(--ac-1-rgb); | ||
8 | --teal-lighter: var(--ac-2); | ||
9 | --teal-lighter-rgb: var(--ac-2); | ||
10 | --green-deep: var(--ac-3); | ||
11 | --green-deep-rgb: var(--ac-3-rgb); | ||
12 | --active-tab-marker: var(--ac-0); | ||
13 | --active-tab-marker-rgb: var(--ac-0-rgb); | ||
14 | --app-background-stripe: var(--bg-1); | ||
15 | --app-background-stripe-rgb: var(--bg-1-rgb); | ||
16 | --app-background: var(--bg-0); | ||
17 | --app-background-rgb: var(--bg-0-rgb); | ||
18 | --app-background-deeper: var(--bg-0); | ||
19 | --app-background-deeper-rgb: var(--bg-0-rgb); | ||
20 | --audio-progress-incoming: var(--green); | ||
21 | --audio-progress-incoming-rgb: var(--green-rgb); | ||
22 | --audio-progress-outgoing: var(--ac-2); | ||
23 | --audio-progress-outgoing-rgb: var(--ac-2-rgb); | ||
24 | --audio-progress-played-incoming: var(--blue); | ||
25 | --audio-progress-played-incoming-rgb: var(--blue-rgb); | ||
26 | --audio-progress-played-outgoing: var(--blue); | ||
27 | --audio-progress-played-outgoing-rgb: var(--blue-rgb); | ||
28 | --audio-track-incoming: var(--fg-4); | ||
29 | --audio-track-incoming-rgb: var(--fg-4-rgb); | ||
30 | --audio-track-outgoing: var(--fg-4); | ||
31 | --audio-track-outgoing-rgb: var(--fg-4-rgb); | ||
32 | --avatar-background: var(--bg-1); | ||
33 | --avatar-background-rgb: var(--bg-1-rgb); | ||
34 | --avatar-border: var(--fg-3); | ||
35 | --avatar-border-rgb: var(--fg-3-rgb); | ||
36 | --avatar-placeholder-background: var(--bg-5); | ||
37 | --avatar-placeholder-background-rgb: var(--bg-5-rgb); | ||
38 | --avatar-placeholder-primary: var(--fg-3); | ||
39 | --avatar-placeholder-primary-rgb: var(--fg-3-rgb); | ||
40 | --background-default: var(--bg-1); | ||
41 | --background-default-rgb: var(--bg-1-rgb); | ||
42 | --background-default-active: var(--bg-3); | ||
43 | --background-default-active-rgb: var(--bg-3-rgb); | ||
44 | --background-default-hover: var(--bg-2); | ||
45 | --background-default-hover-rgb: var(--bg-2-rgb); | ||
46 | --border-bubble: var(--shadow); | ||
47 | --border-bubble-rgb: var(--shadow-rgb); | ||
48 | --border-default: var(--bg-3); | ||
49 | --border-default-rgb: var(--bg-3-rgb); | ||
50 | --border-list: var(--bg-3); | ||
51 | --border-list-rgb: var(--bg-3-rgb); | ||
52 | --border-panel: var(--bg-5); | ||
53 | --border-panel-rgb: var(--bg-5-rgb); | ||
54 | --border-strong: var(--bg-5); | ||
55 | --border-strong-rgb: var(--bg-5-rgb); | ||
56 | --border-stronger: var(--bg-5); | ||
57 | --border-stronger-rgb: var(--fg-5-rgb); | ||
58 | --bubble-meta: var(--fg-3); | ||
59 | --bubble-meta-rgb: var(--fg-3-rgb); | ||
60 | --bubble-meta-icon: var(--fg-3); | ||
61 | --bubble-meta-icon-rgb: var(--fg-3-rgb); | ||
62 | --butterbar-battery-background: #57272b; | ||
63 | --butterbar-battery-background-rgb: 87, 39, 43; | ||
64 | --butterbar-battery-primary: var(--fg-0); | ||
65 | --butterbar-battery-primary-rgb: var(--fg-0-rgb); | ||
66 | --butterbar-battery-secondary: var(--fg-4); | ||
67 | --butterbar-battery-secondary-rgb: var(--fg-4-rgb); | ||
68 | --butterbar-connection-background: #504b24; | ||
69 | --butterbar-connection-background-rgb: 80, 75, 36; | ||
70 | --butterbar-connection-primary: var(--bg-3); | ||
71 | --butterbar-connection-primary-rgb: var(--bg-3-rgb); | ||
72 | --butterbar-connection-secondary: var(--bg-3); | ||
73 | --butterbar-connection-secondary-rgb: var(--bg-3-rgb); | ||
74 | --butterbar-default-background: #21425c; | ||
75 | --butterbar-default-background-rgb: 33, 66, 92; | ||
76 | --butterbar-icon: var(--fg-1); | ||
77 | --butterbar-icon-rgb: var(--fg-1-rgb); | ||
78 | --butterbar-primary: var(--fg-0); | ||
79 | --butterbar-primary-rgb: var(--fg-0-rgb); | ||
80 | --butterbar-secondary: var(--fg-4); | ||
81 | --butterbar-secondary-rgb: var(--fg-4-rgb); | ||
82 | --butterbar-update-background: var(--ac-0); | ||
83 | --butterbar-update-background-rgb: var(--ac-0-rgb); | ||
84 | --button-alternative: var(--ac-1); | ||
85 | --button-alternative-rgb: var(--ac-1-rgb); | ||
86 | --button-alternative-background: var(--bg-3); | ||
87 | --button-alternative-background-rgb: var(--bg-3-rgb); | ||
88 | --button-background-disabled: var(--bg-2); | ||
89 | --button-background-disabled-rgb: var(--bg-2-rgb); | ||
90 | --button-bubble: var(--ac-0); | ||
91 | --button-bubble-rgb: var(--ac-0-rgb); | ||
92 | --button-primary: var(--white); | ||
93 | --button-primary-rgb: var(--white-rgb); | ||
94 | --button-primary-background: var(--ac-0); | ||
95 | --button-primary-background-rgb: var(--ac-0-rgb); | ||
96 | --button-primary-background-hover: var(--ac-3); | ||
97 | --button-primary-background-hover-rgb: var(--ac-3-rgb); | ||
98 | --button-round-background: var(--ac-0); | ||
99 | --button-round-background-rgb: var(--ac-0-rgb); | ||
100 | --button-secondary: var(--ac-0); | ||
101 | --button-secondary-rgb: var(--ac-0-rgb); | ||
102 | --button-secondary-background: transparent; | ||
103 | --button-secondary-background-rgb: 0, 0, 0; | ||
104 | --button-secondary-background-hover: rgba(241, 241, 242, 0.051); | ||
105 | --button-secondary-background-hover-rgb: var(--fg-3-rgb); | ||
106 | --button-secondary-hover: var(--ac-0); | ||
107 | --button-secondary-hover-rgb: var(--ac-0-rgb); | ||
108 | --chat-marker: var(--fg-3); | ||
109 | --chat-marker-rgb: var(--fg-3-rgb); | ||
110 | --chat-marker-admin: var(--ac-0); | ||
111 | --chat-marker-admin-rgb: var(--ac-0-rgb); | ||
112 | --chat-marker-admin-border: var(--ac-0); | ||
113 | --chat-marker-admin-border-rgb: var(--ac-0-rgb); | ||
114 | --chat-marker-border: var(--fg-3); | ||
115 | --chat-marker-border-rgb: var(--fg-3-rgb); | ||
116 | --chatlist-icon: var(--fg-5); | ||
117 | --chatlist-icon-rgb: var(--fg-5-rgb); | ||
118 | --checkbox-background: var(--ac-0); | ||
119 | --checkbox-background-rgb: var(--ac-0-rgb); | ||
120 | --checkbox-mark: var(--white); | ||
121 | --checkbox-mark-rgb: var(--white-rgb); | ||
122 | --compose-background: var(--bg-1); | ||
123 | --compose-background-rgb: var(--bg-1-rgb); | ||
124 | --compose-background-focused: #203946; | ||
125 | --compose-background-focused-rgb: 32, 57, 70; | ||
126 | --compose-border-focused: #274656; | ||
127 | --compose-border-focused-rgb: 39, 70, 86; | ||
128 | --compose-panel-background: var(--bg-3); | ||
129 | --compose-panel-background-rgb: var(--bg-3-rgb); | ||
130 | --conversation-panel-background: var(--bg-2); | ||
131 | --conversation-panel-background-rgb: var(--bg-2-rgb); | ||
132 | --conversation-panel-border: var(--bg-5); | ||
133 | --conversation-panel-border-rgb: var(--fg-3-rgb); | ||
134 | --danger: var(--red); | ||
135 | --danger-rgb: var(--red-rgb); | ||
136 | --drawer-background: var(--bg-3); | ||
137 | --drawer-background-rgb: var(--bg-3-rgb); | ||
138 | --drawer-background-deep: var(--bg-0); | ||
139 | --drawer-background-deep-rgb: var(--bg-0-rgb); | ||
140 | --drawer-gallery-background: var(--bg-1); | ||
141 | --drawer-gallery-background-rgb: var(--bg-1-rgb); | ||
142 | --drawer-header-title: var(--fg-1); | ||
143 | --drawer-header-title-rgb: var(--fg-1-rgb); | ||
144 | --drawer-section-background: var(--bg-1); | ||
145 | --drawer-section-background-rgb: var(--bg-1-rgb); | ||
146 | --dropdown-background: var(--bg-2); | ||
147 | --dropdown-background-rgb: var(--bg-2-rgb); | ||
148 | --dropdown-background-hover: var(--bg-3); | ||
149 | --dropdown-background-hover-rgb: var(--bg-3-rgb); | ||
150 | --empty-state-background: var(--bg-3); | ||
151 | --empty-state-background-rgb: var(--bg-3-rgb); | ||
152 | --empty-state-icon: #757c81; | ||
153 | --empty-state-icon-rgb: 117, 124, 129; | ||
154 | --focus: var(--ac-3); | ||
155 | --focus-rgb: var(--ac-3-rgb); | ||
156 | --focus-animation: var(--ac-3); | ||
157 | --focus-animation-rgb: var(--ac-3-rgb); | ||
158 | --focus-animation-deeper: var(--ac-3); | ||
159 | --focus-animation-deeper-rgb: var(--ac-3-rgb); | ||
160 | --focus-lighter: var(--ac-3); | ||
161 | --focus-lighter-rgb: var(--ac-3-rgb); | ||
162 | --highlight: var(--ac-0); | ||
163 | --highlight-rgb: var(--ac-0-rgb); | ||
164 | --icon: var(--fg-3); | ||
165 | --icon-rgb: var(--fg-3-rgb); | ||
166 | --icon-ack: var(--ac-0); | ||
167 | --icon-ack-rgb: var(--ac-0-rgb); | ||
168 | --icon-disabled: var(--fg-5); | ||
169 | --icon-disabled-rgb: var(--fg-5-rgb); | ||
170 | --icon-fixed: var(--fg-3); | ||
171 | --icon-fixed-rgb: var(--fg-3-rgb); | ||
172 | --icon-lighter: var(--fg-5); | ||
173 | --icon-lighter-rgb: var(--fg-0-rgb); | ||
174 | --icon-search-back: var(--ac-2); | ||
175 | --icon-search-back-rgb: var(--ac-2-rgb); | ||
176 | --icon-strong: var(--fg-1); | ||
177 | --icon-strong-rgb: var(--fg-1-rgb); | ||
178 | --incoming-background: var(--bg-4); | ||
179 | --incoming-background-rgb: var(--bg-4-rgb); | ||
180 | --incoming-background-deeper: var(--bg-3); | ||
181 | --incoming-background-deeper-rgb: var(--bg-3-rgb); | ||
182 | --incoming-background-highlight: #ccc; | ||
183 | --incoming-background-highlight-rgb: 204, 204, 204; | ||
184 | --incoming-primary: var(--fg-3); | ||
185 | --incoming-primary-rgb: var(--fg-3-rgb); | ||
186 | --input-border-active: var(--ac-0); | ||
187 | --input-border-active-rgb: var(--ac-0-rgb); | ||
188 | --input-placeholder: var(--fg-4); | ||
189 | --input-placeholder-rgb: var(--fg-4); | ||
190 | --intro-background: var(--bg-2); | ||
191 | --intro-background-rgb: var(--bg-2-rgb); | ||
192 | --intro-border: var(--ac-3); | ||
193 | --intro-border-rgb: var(--ac-3-rgb); | ||
194 | --inverse: #f1f1f2; | ||
195 | --inverse-rgb: var(--fg-3-rgb); | ||
196 | --labels-icon: rgba(241, 241, 242, 0.4); | ||
197 | --labels-icon-rgb: var(--fg-3-rgb); | ||
198 | --link: var(--ac-0); | ||
199 | --link-rgb: var(--ac-0-rgb); | ||
200 | --live-location-footer-background: var(--bg-1); | ||
201 | --live-location-footer-background-rgb: var(--bg-1-rgb); | ||
202 | --live-location-glow: rgba(37, 211, 102, 0.302); | ||
203 | --live-location-glow-rgb: 37, 211, 102; | ||
204 | --live-location-glow-stale: rgba(255, 0, 31, 0.302); | ||
205 | --live-location-glow-stale-rgb: 255, 0, 31; | ||
206 | --location-cluster-background: var(--bg-1); | ||
207 | --location-cluster-background-rgb: var(--bg-1-rgb); | ||
208 | --media-editor-control: #1c313f; | ||
209 | --media-editor-control-rgb: 28, 49, 63; | ||
210 | --media-viewer-background: rgba(var(--bg-1-rgb), 0.95); | ||
211 | --media-viewer-background-rgb: var(--bg-1-rgb); | ||
212 | --media-viewer-button-background: var(--bg-3); | ||
213 | --media-viewer-button-background-rgb: var(--bg-3-rgb); | ||
214 | --media-viewer-button-icon: #f1f1f2; | ||
215 | --media-viewer-button-icon-rgb: var(--fg-3-rgb); | ||
216 | --menu-tabs-list-active: var(--ac-0); | ||
217 | --menu-tabs-list-active-rgb: var(--ac-0-rgb); | ||
218 | --message-background-deep: var(--bg-0); | ||
219 | --message-background-deep-rgb: var(--bg-0-rgb); | ||
220 | --message-placeholder-icon: rgba(204, 204, 204, 0.302); | ||
221 | --message-placeholder-icon-rgb: 204, 204, 204; | ||
222 | --message-selection-highlight: rgba(var(--ac-0-rgb), 0.1); | ||
223 | --message-selection-highlight-rgb: var(--ac-0-rgb); | ||
224 | --modal-backdrop: rgba(var(--bg-0-rgb), 0.95); | ||
225 | --modal-backdrop-rgb: var(--bg-0-rgb); | ||
226 | --modal-backdrop-solid: var(--bg-0); | ||
227 | --modal-backdrop-solid-rgb: var(--bg-0-rgb); | ||
228 | --modal-background: var(--bg-2); | ||
229 | --modal-background-rgb: var(--bg-2-rgb); | ||
230 | --notification-biz-background: var(--bg-3); | ||
231 | --notification-biz-background-rgb: var(--bg-3-rgb); | ||
232 | --notification-biz-text: #55fad9; | ||
233 | --notification-biz-text-rgb: 85, 250, 217; | ||
234 | --notification-e2e-background: var(--bg-0); | ||
235 | --notification-e2e-background-rgb: var(--bg-3-rgb); | ||
236 | --notification-e2e-icon: #fad964; | ||
237 | --notification-e2e-icon-rgb: 250, 217, 100; | ||
238 | --notification-e2e-text: #fad964; | ||
239 | --notification-e2e-text-rgb: 250, 217, 100; | ||
240 | --notification-text: rgba(241, 241, 242, 0.4); | ||
241 | --notification-text-rgb: var(--fg-3-rgb); | ||
242 | --outgoing-background: var(--ac-4); | ||
243 | --outgoing-background-rgb: var(--ac-4-rgb); | ||
244 | --outgoing-background-deeper: var(--ac-5); | ||
245 | --outgoing-background-deeper-rgb: var(--ac-5-rbg); | ||
246 | --outgoing-background-highlight: #ccc; | ||
247 | --outgoing-background-highlight-rgb: 204, 204, 204; | ||
248 | --overlay: var(--bg-0); | ||
249 | --overlay-rgb: var(--bg-0-rgb); | ||
250 | --panel-background: var(--bg-3); | ||
251 | --panel-background-rgb: var(--bg-3-rgb); | ||
252 | --panel-background-active: #1a262d; | ||
253 | --panel-background-active-rgb: 26, 38, 45; | ||
254 | --panel-background-colored: var(--bg-4); | ||
255 | --panel-background-colored-rgb: var(--bg-4-rgb); | ||
256 | --panel-background-colored-deeper: var(--bg-3); | ||
257 | --panel-background-colored-deeper-rgb: var(--bg-3-rgb); | ||
258 | --panel-background-deep: var(--bg-2); | ||
259 | --panel-background-deep-rgb: var(--bg-2-rgb); | ||
260 | --panel-background-deeper: var(--bg-2); | ||
261 | --panel-background-deeper-rgb: var(--bg-3-rgb); | ||
262 | --panel-background-hover: #1b272e; | ||
263 | --panel-background-hover-rgb: 27, 39, 46; | ||
264 | --panel-background-lighter: var(--bg-2); | ||
265 | --panel-background-lighter-rgb: var(--bg-3-rgb); | ||
266 | --panel-header-background: var(--bg-3); | ||
267 | --panel-header-background-rgb: var(--bg-3-rgb); | ||
268 | --panel-header-icon: var(--fg-3); | ||
269 | --panel-header-icon-rgb: var(--fg-3-rgb); | ||
270 | --panel-primary: rgba(241, 241, 242, 0.349); | ||
271 | --panel-primary-rgb: var(--fg-3-rgb); | ||
272 | --payment-amount: #00a593; | ||
273 | --payment-amount-rgb: 0, 164.8, 146.90743; | ||
274 | --payment-status-failed: #ef697a; | ||
275 | --payment-status-failed-rgb: 239, 105, 122; | ||
276 | --payment-status-processing: var(--fg-1); | ||
277 | --payment-status-processing-rgb: var(--fg-3-rgb); | ||
278 | --payment-status-success: #40cf6c; | ||
279 | --payment-status-success-rgb: 64, 207, 108; | ||
280 | --payment-status-waiting: var(--fg-1); | ||
281 | --payment-status-waiting-rgb: var(--fg-3-rgb); | ||
282 | --photopicker-overlay-background: rgba(33, 44, 49, 0.8); | ||
283 | --photopicker-overlay-background-rgb: 33, 44, 49; | ||
284 | --popup-panel-background: var(--bg-2); | ||
285 | --popup-panel-background-rgb: var(--bg-2-rgb); | ||
286 | --primary: var(--fg-2); | ||
287 | --primary-rgb: var(--fg-2-rgb); | ||
288 | --primary-strong: var(--fg-1); | ||
289 | --primary-strong-rgb: var(--fg-1-rgb); | ||
290 | --primary-stronger: var(--fg-0); | ||
291 | --primary-stronger-rgb: var(--fg-0-rgb); | ||
292 | --primary-title: var(--fg-2); | ||
293 | --primary-title-rgb: var(--fg-2-rgb); | ||
294 | --product-thumb-background: var(--bg-3); | ||
295 | --product-thumb-background-rgb: var(--bg-3-rgb); | ||
296 | --product-thumb-background-deeper: #2b3e49; | ||
297 | --product-thumb-background-deeper-rgb: 43.232, 61.76, 72.568; | ||
298 | --ptt-blue: var(--blue); | ||
299 | --ptt-blue-rgb: var(--blue-rgb); | ||
300 | --ptt-button-cancel: var(--red); | ||
301 | --ptt-button-cancel-rgb: var(--red-rgb); | ||
302 | --ptt-button-send: var(--green); | ||
303 | --ptt-button-send-rgb: var(--green); | ||
304 | --ptt-gray: var(--fg-4); | ||
305 | --ptt-gray-rgb: var(--fg-4-rgb); | ||
306 | --ptt-green: var(--green); | ||
307 | --ptt-green-rgb: var(--green); | ||
308 | --ptt-message-blue: var(--blue); | ||
309 | --ptt-message-blue-rgb: var(--blue-rgb); | ||
310 | --quick-action-button: var(--fg-3); | ||
311 | --quick-action-button-rgb: var(--fg-3-rgb); | ||
312 | --quick-action-button-background: var(--bg-4); | ||
313 | --quick-action-button-background-rgb: var(--bg-4-rgb); | ||
314 | --rich-text-panel-background: var(--bg-3); | ||
315 | --rich-text-panel-background-rgb: var(--bg-3-rgb); | ||
316 | --secondary: var(--fg-3); | ||
317 | --secondary-rgb: var(--fg-3-rgb); | ||
318 | --secondary-light: var(--fg-2); | ||
319 | --secondary-light-rgb: var(--fg-2-rgb); | ||
320 | --secondary-lighter: var(--fg-1); | ||
321 | --secondary-lighter-rgb: var(--fg-1-rgb); | ||
322 | --secondary-stronger: var(--fg-0); | ||
323 | --secondary-stronger-rgb: var(--fg-0-rgb); | ||
324 | --shadow: var(--bg-0); | ||
325 | --shadow-rgb: var(--bg-0-rgb); | ||
326 | --shadow-light: var(--bg-0); | ||
327 | --shadow-light-rgb: var(--bg-0-rgb); | ||
328 | --spinner-default: var(--fg-3); | ||
329 | --spinner-default-rgb: var(--fg-3-rgb); | ||
330 | --spinner-highlight: var(--ac-0); | ||
331 | --spinner-highlight-rgb: var(--ac-0-rgb); | ||
332 | --spinner-incoming: var(--fg-5); | ||
333 | --spinner-incoming-rgb: var(--fg-5-rgb); | ||
334 | --spinner-outgoing: var(--ac-5); | ||
335 | --spinner-outgoing-rgb: var(--ac-5-rgb); | ||
336 | --status-background: var(--bg-1); | ||
337 | --status-background-rgb: var(--bg-1-rgb); | ||
338 | --status-background-hover: var(--bg-2); | ||
339 | --status-background-hover-rgb: var(--bg-2-rgb); | ||
340 | --status-primary: #fff; | ||
341 | --status-primary-rgb: 255, 255, 255; | ||
342 | --status-secondary: rgba(255, 255, 255, 0.549); | ||
343 | --status-secondary-rgb: 255, 255, 255; | ||
344 | --status-secondary-stronger: #b3b3b3; | ||
345 | --status-secondary-stronger-rgb: 179, 179, 179; | ||
346 | --success: var(--ac-0); | ||
347 | --success-rgb: var(--ac-0-rgb); | ||
348 | --suspicious-background: rgba(239, 105, 122, 0.8); | ||
349 | --suspicious-background-rgb: 239, 105, 122; | ||
350 | --system-message-background: var(--ac-4); | ||
351 | --system-message-background-rgb: var(--ac-4-rgb); | ||
352 | --system-message-text: var(--fg-1); | ||
353 | --system-message-text-rgb: 241, 241, 242; | ||
354 | --teal-hover: #00b7a1; | ||
355 | --teal-hover-rgb: 0, 183, 161; | ||
356 | --teal-pale: #5fc8bc; | ||
357 | --teal-pale-rgb: 95, 200, 188; | ||
358 | --thumb-border-active: var(--bg-2); | ||
359 | --thumb-border-active-rgb: var(--bg-2-rgb); | ||
360 | --thumb-border-viewer-active: var(--fg-3); | ||
361 | --thumb-border-viewer-active-rgb: var(--fg-3-rgb); | ||
362 | --toast-background: var(--bg-3); | ||
363 | --toast-background-rgb: var(--bg-3-rgb); | ||
364 | --tooltip-background: rgba(89, 89, 89, 0.851); | ||
365 | --tooltip-background-rgb: 89.25, 89.25, 89.25; | ||
366 | --typing: var(--ac-0); | ||
367 | --typing-rgb: var(--ac-0-rgb); | ||
368 | --unread-background: var(--bg-3); | ||
369 | --unread-background-rgb: var(--bg-3-rgb); | ||
370 | --unread-bar-background: var(--bg-0); | ||
371 | --unread-bar-background-rgb: var(--bg-0-rgb); | ||
372 | --unread-marker-background: var(--ac-0); | ||
373 | --unread-marker-background-rgb: var(--ac-0-rgb); | ||
374 | --unread-marker-text: var(--white); | ||
375 | --unread-marker-text-rgb: var(--white-rgb); | ||
376 | --video-player-background: #000; | ||
377 | --video-player-background-rgb: 0, 0, 0; | ||
378 | --video-primary: #fff; | ||
379 | --video-primary-rgb: 255, 255, 255; | ||
380 | --voip-accept-background: #70db91; | ||
381 | --voip-accept-background-rgb: 112, 219, 145; | ||
382 | --voip-background: #262626; | ||
383 | --voip-background-rgb: 38, 38, 38; | ||
384 | --voip-background-deep: #000; | ||
385 | --voip-background-deep-rgb: 0, 0, 0; | ||
386 | --voip-primary: #fff; | ||
387 | --voip-primary-rgb: 255, 255, 255; | ||
388 | --voip-reject-background: #e54b40; | ||
389 | --voip-reject-background-rgb: 229, 75, 64; | ||
390 | --win32-title-primary: #fff; | ||
391 | --win32-title-primary-rgb: 255, 255, 255; | ||
392 | --bg-0: #1c2026 !important; | ||
393 | --bg-0-rgb: 28, 32, 38; | ||
394 | --bg-1: #1f232a !important; | ||
395 | --bg-1-rgb: 31, 35, 42; | ||
396 | --bg-2: #282d37 !important; | ||
397 | --bg-2-rgb: 40, 45, 55; | ||
398 | --bg-3: #323843 !important; | ||
399 | --bg-3-rgb: 50, 56, 67; | ||
400 | --bg-4: #3b4250 !important; | ||
401 | --bg-4-rgb: 59, 66, 80; | ||
402 | --bg-5: #444d5c !important; | ||
403 | --bg-5-rgb: 68, 77, 92; | ||
404 | --fg-0: #f0f0f0 !important; | ||
405 | --fg-0-rgb: 240, 240, 240; | ||
406 | --fg-1: #eee !important; | ||
407 | --fg-1-rgb: 238, 238, 238; | ||
408 | --fg-2: #e0e0e0 !important; | ||
409 | --fg-2-rgb: 224, 224, 224; | ||
410 | --fg-3: #d1d1d1 !important; | ||
411 | --fg-3-rgb: 209, 209, 209; | ||
412 | --fg-4: #b5b5b5 !important; | ||
413 | --fg-4-rgb: 181, 181, 181; | ||
414 | --fg-5: #8f8f8f !important; | ||
415 | --fg-5-rgb: 143, 143, 143; | ||
416 | --ac-0: #7289da !important; | ||
417 | --ac-0-rgb: 114, 137, 218; | ||
418 | --ac-1: #6a7fc9 !important; | ||
419 | --ac-1-rgb: 106, 127, 201; | ||
420 | --ac-2: #6376b9 !important; | ||
421 | --ac-2-rgb: 99, 118, 185; | ||
422 | --ac-3: #5b6da8 !important; | ||
423 | --ac-3-rgb: 91, 109, 168; | ||
424 | --ac-4: #38415a !important; | ||
425 | --ac-4-rgb: 56, 65, 90; | ||
426 | --ac-5: #303849 !important; | ||
427 | --ac-5-rgb: 48, 56, 73; | ||
428 | --white: #fff; | ||
429 | --white-rgb: 255, 255, 255; | ||
430 | --red: #dc322f; | ||
431 | --red-rgb: 220, 50, 47; | ||
432 | --green: #859900; | ||
433 | --green-rgb: 133, 153, 0; | ||
434 | --blue: #268bd2; | ||
435 | --blue-rgb: 38, 139, 210; | ||
436 | --yellow: #e5c512; | ||
437 | --yellow-rgb: 229, 197, 18; | ||
438 | --msg-l: #353b46; | ||
439 | --msg-r: #2c323d; | ||
440 | --t: transparent; | ||
441 | --shadow: rgba(0, 0, 0, 0.145); | ||
442 | --sh-h: rgba(0, 0, 0, 0.208); | ||
443 | --bshadow: 0 2px 4px var(--shadow); | ||
444 | --ui-font: "font_name", "Segoe UI", "Helvetica Neue", Helvetica, | ||
445 | "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; | ||
446 | --r-menus: 4px; | ||
447 | --r-inputs: 24px; | ||
448 | --r-avatars: 50%; | ||
449 | --c-m-hover: 0.6s; | ||
450 | --c-m-delay: 1.2s; | ||
451 | --bg-image: url("https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/images/bg-blur-high.jpg"); | ||
452 | --bg-opacity: 0.4; | ||
453 | --bg-blur: 0px; | ||
454 | --bg-blur-s: calc(-2 * var(--bg-blur)); | ||
455 | --bg-hue: 320deg; | ||
456 | --bg-invert: 0; | ||
457 | --bg-size: cover; | ||
458 | --bg-pos: center; | ||
459 | --bg-rep: no-repeat; | ||
460 | --version: "2.10.0 — June 6th, 2020"; | ||
461 | --message: "Dark mode for Franz and Ferdi by Duc Filan, for more services: https://github.com/ducfilan/Dark-mode-Franz-Ferdi"; | ||
462 | --changes: "\A\A All credits for @vednoc/dark-whatsapp"; | ||
463 | } | ||
464 | |||
465 | @supports (scrollbar-width: thin) { | ||
466 | * { | ||
467 | scrollbar-width: thin !important; | ||
468 | scrollbar-color: var(--ac-3) rgba(136, 136, 136, 0.082); | ||
469 | } | ||
470 | } | ||
471 | |||
472 | *::-webkit-scrollbar-thumb { | ||
473 | background: var(--ac-3) !important; | ||
474 | } | ||
475 | |||
476 | *::-webkit-scrollbar-track { | ||
477 | background: var(--shadow) !important; | ||
478 | } | ||
479 | |||
480 | :root { | ||
481 | --intro-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='256' width='256'><g stroke='\%237289da'><path d='M128.4901 30.8659a95.4375 95.4375 0 00-95.4375 95.4375 95.4375 95.4375 0 0014.168 50.0332L35.6698 221.276l44.7989-12.498a95.4375 95.4375 0 0048.0214 12.9629 95.4375 95.4375 0 0095.4375-95.4375 95.4375 95.4375 0 00-95.4375-95.4375z' fill='\%231f232a' fill-rule='evenodd' stroke-width='18' stroke-linecap='square'/><path d='M97.8104 79.8463c-4.9671.0406-13.5028 2.0796-17.7812 14.8946-6.8318 20.4631 12.5737 43.3028 27.2438 57.4735 14.7975 14.2938 43.1559 26.507 58.0098 21.08 20.5566-8.9065 15.2475-22.9479 15.2475-22.9479l-22.9727-11.0878s-2.062-1.206-3.4146.5737c-1.0042 1.3213-9.4409 11.3755-9.4409 11.3755s-1.449 1.668-3.827.7402c-5.7574-2.2462-14.2018-7.4856-18.5314-10.7795-6.8875-5.2399-12.957-13.0846-16.9473-19.668-1.2556-2.5597.6953-4.709.6953-4.709s6.0303-8.2629 7.0176-9.5566c1.0068-1.3194.2539-3.3633.2539-3.3633l-10.539-23.2285s-2.0334-.8212-5.0138-.7969z' fill='\%237289da' stroke-linejoin='round'/></g></svg>"); | ||
482 | } | ||
483 | |||
484 | html > body { | ||
485 | background-image: none !important; | ||
486 | color: var(--fg-0) !important; | ||
487 | background-color: var(--bg-0) !important; | ||
488 | } | ||
489 | |||
490 | html > body, | ||
491 | html > body button, | ||
492 | html > body input { | ||
493 | font-family: var(--ui-font); | ||
494 | } | ||
495 | |||
496 | html > body ._11dpe { | ||
497 | color: #eee !important; | ||
498 | border: 1px solid #444d5c; | ||
499 | } | ||
500 | |||
501 | html > body ._11dpe button:nth-child(2) { | ||
502 | color: #6a7fc9 !important; | ||
503 | } | ||
504 | |||
505 | html > body ._11dpe button:nth-child(3) { | ||
506 | color: #b5b5b5 !important; | ||
507 | } | ||
508 | |||
509 | html > body [data-asset-intro-image-light] { | ||
510 | max-width: 200px; | ||
511 | max-height: 200px; | ||
512 | background-image: var(--intro-image); | ||
513 | transition: opacity 0.6s ease; | ||
514 | border-radius: 0 !important; | ||
515 | } | ||
516 | |||
517 | html > body [data-asset-intro-image-light] + div h1 + div[class] { | ||
518 | font-size: 0; | ||
519 | color: #f0f0f0 !important; | ||
520 | } | ||
521 | |||
522 | html > body [data-asset-intro-image-light] + div h1 + div[class]::before { | ||
523 | display: block; | ||
524 | font-size: 16px; | ||
525 | margin-bottom: -16px; | ||
526 | white-space: pre-wrap; | ||
527 | content: var(--message) var(--changes); | ||
528 | } | ||
529 | |||
530 | html > body [data-asset-intro-image-light] + div h1 + div[class]::after { | ||
531 | display: block; | ||
532 | font-size: 16px; | ||
533 | margin-top: 16px; | ||
534 | padding-top: 24px; | ||
535 | margin-bottom: -16px; | ||
536 | content: var(--version); | ||
537 | border-top: 1px solid #3b4250; | ||
538 | } | ||
539 | |||
540 | html > body [data-asset-chat-background-light] { | ||
541 | filter: invert(1) !important; | ||
542 | } | ||
543 | |||
544 | ._1BjNO[style] { | ||
545 | background-color: #444d5c !important; | ||
546 | } | ||
547 | |||
548 | ._1BjNO[style], | ||
549 | ._1BjNO[style] > img, | ||
550 | ._18cLH { | ||
551 | border-radius: var(--r-avatars) !important; | ||
552 | } | ||
553 | |||
554 | .overlay ._2ouPw, | ||
555 | .overlay ._21ltg, | ||
556 | .overlay > .KeLEe { | ||
557 | background-color: var(--bg-3) !important; | ||
558 | border-bottom: 1px solid var(--bg-5) !important; | ||
559 | } | ||
560 | |||
561 | .overlay ._1kEVs { | ||
562 | background-color: transparent !important; | ||
563 | } | ||
564 | |||
565 | .overlay [data-animate-modal-popup] { | ||
566 | border: 1px solid #444d5c; | ||
567 | border-radius: var(--r-menus) !important; | ||
568 | } | ||
569 | |||
570 | .overlay [data-animate-modal-popup] .copyable-area > header { | ||
571 | border-bottom: 1px solid #444d5c; | ||
572 | } | ||
573 | |||
574 | ._1KWct { | ||
575 | border-color: var(--bg-5) !important; | ||
576 | background-color: var(--bg-3) !important; | ||
577 | } | ||
578 | |||
579 | [data-animate-status-v3-modal-background="true"] { | ||
580 | background-color: var(--modal-backdrop) !important; | ||
581 | } | ||
582 | |||
583 | [data-animate-status-v3-modal-background="true"] > div { | ||
584 | background-color: #282d37 !important; | ||
585 | } | ||
586 | |||
587 | [data-animate-status-v3-modal-background="true"] > div > div:nth-child(1) { | ||
588 | background-color: #1c2026 !important; | ||
589 | border-right: 1px solid #444d5c; | ||
590 | } | ||
591 | |||
592 | @media (min-width: 1441px) { | ||
593 | [data-animate-status-v3-modal-background="true"] > div { | ||
594 | border: 1px solid #444d5c !important; | ||
595 | border-radius: var(--r-menus) !important; | ||
596 | } | ||
597 | } | ||
598 | |||
599 | .color-1 { | ||
600 | color: var(--ac-0) !important; | ||
601 | } | ||
602 | |||
603 | .bg-color-1 { | ||
604 | background-color: var(--ac-0) !important; | ||
605 | } | ||
606 | |||
607 | [data-icon="status-v3-unread"] [fill="#009588"] { | ||
608 | fill: #7289da !important; | ||
609 | } | ||
610 | |||
611 | [id*="startup"] { | ||
612 | background-color: #1c2026 !important; | ||
613 | } | ||
614 | |||
615 | progress { | ||
616 | background-color: #282d37 !important; | ||
617 | } | ||
618 | |||
619 | progress[value]::-moz-progress-bar { | ||
620 | background-color: #7289da !important; | ||
621 | } | ||
622 | |||
623 | ::-moz-progress-bar { | ||
624 | background-color: #3b4250 !important; | ||
625 | } | ||
626 | |||
627 | ::-webkit-progress-bar { | ||
628 | background-color: #3b4250 !important; | ||
629 | } | ||
630 | |||
631 | ::-webkit-progress-value { | ||
632 | background-color: #7289da !important; | ||
633 | } | ||
634 | |||
635 | .landing-wrapper::before { | ||
636 | background-color: #282d37 !important; | ||
637 | } | ||
638 | |||
639 | .landing-header { | ||
640 | position: relative; | ||
641 | } | ||
642 | |||
643 | .landing-header path[fill^="#FFF"] { | ||
644 | fill: #7289da; | ||
645 | } | ||
646 | |||
647 | .landing-header path[fill^="#00E"] { | ||
648 | fill: #1f232a; | ||
649 | } | ||
650 | |||
651 | .landing-header div { | ||
652 | text-transform: unset; | ||
653 | color: #eee !important; | ||
654 | } | ||
655 | |||
656 | .landing-header::after { | ||
657 | font-size: 14px; | ||
658 | font-weight: 500; | ||
659 | position: absolute; | ||
660 | content: var(--version); | ||
661 | } | ||
662 | |||
663 | html[dir="RTL"] .landing-header::after { | ||
664 | left: 0; | ||
665 | } | ||
666 | |||
667 | html[dir="LTR"] .landing-header::after { | ||
668 | right: 0; | ||
669 | } | ||
670 | |||
671 | .landing-window:not(#z) { | ||
672 | border-radius: 4px; | ||
673 | background-color: #1f232a !important; | ||
674 | box-shadow: 0 0 1px #444d5c; | ||
675 | } | ||
676 | |||
677 | .landing-main a[href] { | ||
678 | color: #7289da !important; | ||
679 | } | ||
680 | |||
681 | .landing-main label, | ||
682 | .landing-main ._2yUXW { | ||
683 | color: #d1d1d1 !important; | ||
684 | } | ||
685 | |||
686 | .landing-main .landing-title { | ||
687 | color: #eee !important; | ||
688 | } | ||
689 | |||
690 | .landing-main rect[fill^="#f2f"], | ||
691 | .landing-main rect[fill^="#F2F"] { | ||
692 | fill: #444d5c; | ||
693 | } | ||
694 | |||
695 | .landing-main path[fill^="#818"] { | ||
696 | fill: #7289da; | ||
697 | } | ||
698 | |||
699 | .landing-main div[data-ref] { | ||
700 | border-radius: 0 !important; | ||
701 | filter: contrast(150%); | ||
702 | outline: 4px solid #fff; | ||
703 | box-shadow: 0 0 0 4px #fff; | ||
704 | } | ||
705 | |||
706 | .landing-main div[data-ref] [role="button"] { | ||
707 | color: #fff !important; | ||
708 | background-color: #7289da !important; | ||
709 | } | ||
710 | |||
711 | .landing-main div[data-ref]._2BIlf { | ||
712 | outline: 4px solid #7289da; | ||
713 | box-shadow: 0 0 0 4px #7289da; | ||
714 | } | ||
715 | |||
716 | .landing-main + ._3pdvT { | ||
717 | background-color: transparent !important; | ||
718 | } | ||
719 | |||
720 | .landing-main + ._3pdvT img { | ||
721 | opacity: 0.3; | ||
722 | } | ||
723 | |||
724 | .landing-main + ._3pdvT [style*="opacity: 1"] { | ||
725 | background-color: transparent !important; | ||
726 | } | ||
727 | |||
728 | .landing-main ._3ybl8 { | ||
729 | color: #fff !important; | ||
730 | background-color: #7289da !important; | ||
731 | box-shadow: bsh; | ||
732 | } | ||
733 | |||
734 | .landing-main ._3ybl8::before { | ||
735 | border-bottom-color: #7289da !important; | ||
736 | } | ||
737 | |||
738 | #app > div::after { | ||
739 | top: var(--bg-blur-s); | ||
740 | right: var(--bg-blur-s); | ||
741 | bottom: var(--bg-blur-s); | ||
742 | left: var(--bg-blur-s); | ||
743 | height: unset; | ||
744 | width: unset; | ||
745 | filter: blur(var(--bg-blur)) opacity(var(--bg-opacity)) | ||
746 | invert(var(--bg-invert)) hue-rotate(var(--bg-hue)); | ||
747 | background-color: transparent !important; | ||
748 | background-image: var(--bg-image) !important; | ||
749 | background-position: var(--bg-pos) !important; | ||
750 | background-repeat: var(--bg-rep) !important; | ||
751 | background-size: var(--bg-size) !important; | ||
752 | } | ||
753 | |||
754 | #app > div > span > div[style^="transform-origin:"][tabindex], | ||
755 | #app > div ._2s_eZ[style^="transform-origin:"][tabindex] { | ||
756 | border: 1px solid var(--bg-4); | ||
757 | border-radius: var(--r-menus) !important; | ||
758 | } | ||
759 | |||
760 | #app > div > [tabindex] { | ||
761 | background: none !important; | ||
762 | } | ||
763 | |||
764 | @media (min-width: 1441px) { | ||
765 | #app > div > [tabindex] { | ||
766 | border-radius: var(--r-menus) !important; | ||
767 | border: 1px solid #444d5c !important; | ||
768 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.145); | ||
769 | } | ||
770 | } | ||
771 | |||
772 | #app > div > [tabindex]::after { | ||
773 | content: unset !important; | ||
774 | } | ||
775 | |||
776 | #app > div > [tabindex] .gQzdc, | ||
777 | #app > div > [tabindex] ._3qx7_ { | ||
778 | border-bottom: 1px solid #444d5c !important; | ||
779 | } | ||
780 | |||
781 | #app > div > [tabindex] .gQzdc::after, | ||
782 | #app > div > [tabindex] ._3qx7_::after { | ||
783 | display: none !important; | ||
784 | } | ||
785 | |||
786 | ._1yO24 { | ||
787 | animation: none !important; | ||
788 | } | ||
789 | |||
790 | #app > div > [tabindex] .gQzdc label, | ||
791 | #app > div > [tabindex] ._3qx7_ label { | ||
792 | border-radius: var(--r-inputs) !important; | ||
793 | } | ||
794 | |||
795 | #app > div > [tabindex] #side > header { | ||
796 | border-bottom: 1px solid #444d5c !important; | ||
797 | } | ||
798 | |||
799 | #app > div > [tabindex] #side > header + span > div { | ||
800 | border-bottom: 1px solid #444d5c !important; | ||
801 | } | ||
802 | |||
803 | #app > div > [tabindex] #side > header + span > div [data-icon="x"] svg path { | ||
804 | fill: #8f8f8f; | ||
805 | } | ||
806 | |||
807 | #app > div > [tabindex] ._14VS3 > ._1V8rX { | ||
808 | border-left: 1px solid #444d5c !important; | ||
809 | } | ||
810 | |||
811 | #app > div > [tabindex] ._14VS3 > ._1V8rX .copyable-area > header { | ||
812 | border-bottom: none !important; | ||
813 | } | ||
814 | |||
815 | #main > header { | ||
816 | border-right: none !important; | ||
817 | border-bottom: 1px solid !important; | ||
818 | border-color: var(--bg-5) !important; | ||
819 | } | ||
820 | |||
821 | #main > header::after { | ||
822 | content: unset !important; | ||
823 | } | ||
824 | |||
825 | #main ._1E1g0 { | ||
826 | text-shadow: 0 1px 0 rgba(var(--fg-3-rgb), 0.2); | ||
827 | } | ||
828 | |||
829 | #main ._9WQEN { | ||
830 | border: none !important; | ||
831 | } | ||
832 | |||
833 | #main [class*="message-"][data-id] > span + div:not(.urabC) > div { | ||
834 | box-shadow: 0 1px 0 rgba(var(--shadow-rgb), 0.33) !important; | ||
835 | } | ||
836 | |||
837 | #main .-AOZp ._2oA-- + div[style] { | ||
838 | background-color: var(--bg-4) !important; | ||
839 | } | ||
840 | |||
841 | #main > footer > .copyable-area { | ||
842 | border-top: 1px solid var(--bg-5) !important; | ||
843 | } | ||
844 | |||
845 | #main > footer + span > ._2pAWd { | ||
846 | border-top: 1px solid var(--bg-5) !important; | ||
847 | border-left: 1px solid var(--bg-5) !important; | ||
848 | } | ||
849 | |||
850 | #main > footer ._3eShu { | ||
851 | border-top: 1px solid var(--bg-5) !important; | ||
852 | border-bottom: 1px solid var(--bg-5) !important; | ||
853 | } | ||
854 | |||
855 | #main > footer ._3uMse { | ||
856 | border-radius: var(--r-inputs) !important; | ||
857 | } | ||
858 | |||
859 | @media screen and (max-height: 500px) { | ||
860 | #app > div > [tabindex] { | ||
861 | min-height: auto; | ||
862 | } | ||
863 | } | ||
864 | |||
865 | @media screen and (max-width: 648px) { | ||
866 | #app > div > [tabindex] { | ||
867 | min-width: auto; | ||
868 | } | ||
869 | } | ||
870 | |||
871 | @media screen and (max-width: 720px) { | ||
872 | .two > div:nth-child(3), | ||
873 | .three > div:nth-child(3) { | ||
874 | flex: 0 0 80px !important; | ||
875 | transition: 0.2s ease; | ||
876 | } | ||
877 | |||
878 | .two > div:nth-child(3):hover, | ||
879 | .three > div:nth-child(3):hover, | ||
880 | .two > div:nth-child(3):focus-within, | ||
881 | .three > div:nth-child(3):focus-within { | ||
882 | flex: 0 0 30% !important; | ||
883 | } | ||
884 | |||
885 | .two > div:nth-child(2) > div:nth-child(2) { | ||
886 | flex: 0 0 calc(100% - 80px) !important; | ||
887 | margin-left: calc(-30% + 80px); | ||
888 | } | ||
889 | |||
890 | .two > div:nth-child(3) { | ||
891 | min-width: 1px !important; | ||
892 | transition: 0.3s ease !important; | ||
893 | transition-delay: var(--c-m-delay) !important; | ||
894 | } | ||
895 | |||
896 | .two > div:nth-child(3):hover { | ||
897 | min-width: 349px !important; | ||
898 | transition-delay: var(--c-m-hover) !important; | ||
899 | flex: 0 0 30% !important; | ||
900 | } | ||
901 | |||
902 | .two > :nth-child(2) > :nth-child(1) { | ||
903 | z-index: 201 !important; | ||
904 | flex: 0 0 30% !important; | ||
905 | } | ||
906 | |||
907 | .two > :nth-child(2) > :nth-child(1) [style][tabindex] { | ||
908 | border-right: 1px solid #444d5c !important; | ||
909 | } | ||
910 | |||
911 | .two ._1xXdX:hover { | ||
912 | min-width: 349px !important; | ||
913 | } | ||
914 | |||
915 | .three > div:nth-child(2) > div:nth-child(2) { | ||
916 | flex: 0 0 calc(100% - 30% - 80px) !important; | ||
917 | margin-left: calc(-30% + 80px); | ||
918 | } | ||
919 | |||
920 | .three > div:nth-child(4) { | ||
921 | flex: 0 0 calc(100% - 30% - 80px) !important; | ||
922 | } | ||
923 | |||
924 | .three > div:nth-child(3):hover { | ||
925 | flex: 0 0 80px !important; | ||
926 | } | ||
927 | |||
928 | .three ._14VS3, | ||
929 | .three ._1xXdX { | ||
930 | flex: 0 0 30% !important; | ||
931 | border-color: transparent !important; | ||
932 | } | ||
933 | |||
934 | ._3qx7_:not(._3fVV4) label { | ||
935 | padding: 0px; | ||
936 | } | ||
937 | |||
938 | #side > header { | ||
939 | min-width: 240px; | ||
940 | } | ||
941 | |||
942 | #side > header + span { | ||
943 | display: none; | ||
944 | } | ||
945 | |||
946 | #side .eJ0yJ > div:last-child { | ||
947 | padding-left: 5px !important; | ||
948 | } | ||
949 | |||
950 | #side .eJ0yJ ._1582E { | ||
951 | position: relative; | ||
952 | flex-direction: row-reverse !important; | ||
953 | } | ||
954 | |||
955 | #side .eJ0yJ ._1582E .m61XR { | ||
956 | z-index: 999 !important; | ||
957 | margin-left: 0 !important; | ||
958 | position: absolute; | ||
959 | left: -41px; | ||
960 | bottom: -6px; | ||
961 | border-radius: 50%; | ||
962 | } | ||
963 | |||
964 | #side .eJ0yJ ._1582E .m61XR ._15G96 { | ||
965 | margin: 0; | ||
966 | } | ||
967 | |||
968 | #side .eJ0yJ ._1582E .m61XR ._31gEB { | ||
969 | border: 4px solid #1c2026; | ||
970 | } | ||
971 | |||
972 | #side .eJ0yJ ._1582E .m61XR > span { | ||
973 | display: flex !important; | ||
974 | flex-direction: row-reverse !important; | ||
975 | } | ||
976 | |||
977 | #side .eJ0yJ ._1582E ._38QnI, | ||
978 | #side .eJ0yJ ._1582E .ZKn2B > *:not(._31gEB) { | ||
979 | display: none; | ||
980 | } | ||
981 | |||
982 | ._616fG { | ||
983 | overflow: unset !important; | ||
984 | margin-top: -8px !important; | ||
985 | margin-left: 0px !important; | ||
986 | position: absolute !important; | ||
987 | } | ||
988 | |||
989 | ._616fG::before { | ||
990 | content: "" !important; | ||
991 | z-index: 1 !important; | ||
992 | position: absolute !important; | ||
993 | top: -31px !important; | ||
994 | left: -71px !important; | ||
995 | height: 53px !important; | ||
996 | width: 53px !important; | ||
997 | border-radius: var(--r-avatars) !important; | ||
998 | box-shadow: inset 0 0 0 3px #859900 !important; | ||
999 | animation: 2s pulse infinite !important; | ||
1000 | } | ||
1001 | |||
1002 | #side .eJ0yJ .zFnXi { | ||
1003 | padding: 1.5px; | ||
1004 | z-index: 101; | ||
1005 | position: absolute; | ||
1006 | margin: -2px 0 0 -75px; | ||
1007 | border: 3px solid #1f232a; | ||
1008 | background-color: #323843 !important; | ||
1009 | border-radius: 50%; | ||
1010 | } | ||
1011 | |||
1012 | #side .eJ0yJ .zFnXi > span > svg { | ||
1013 | padding: 2px; | ||
1014 | height: 14px !important; | ||
1015 | width: 14px !important; | ||
1016 | } | ||
1017 | |||
1018 | #side .eJ0yJ._13opk ._31gEB, | ||
1019 | #side .eJ0yJ._13opk .zFnXi { | ||
1020 | border-color: #323843 !important; | ||
1021 | background-color: #444d5c !important; | ||
1022 | } | ||
1023 | |||
1024 | #side .eJ0yJ:hover:not(._13opk) ._31gEB, | ||
1025 | #side .eJ0yJ:hover:not(._13opk) .zFnXi { | ||
1026 | border-color: #282d37 !important; | ||
1027 | } | ||
1028 | |||
1029 | #side ._2kHpK { | ||
1030 | min-width: 80px !important; | ||
1031 | } | ||
1032 | } | ||
1033 | |||
1034 | .copyable-text { | ||
1035 | color: #eee; | ||
1036 | } | ||
1037 | |||
1038 | ._3FRCZ { | ||
1039 | color: #eee !important; | ||
1040 | } | ||
1041 | |||
1042 | ._3uMse { | ||
1043 | background-color: #282d37 !important; | ||
1044 | border-color: #282d37 !important; | ||
1045 | } | ||
1046 | |||
1047 | .r9_f4 > .h3p5g > ._3Whw5 { | ||
1048 | color: #eee !important; | ||
1049 | } | ||
1050 | |||
1051 | ._2EoyP { | ||
1052 | background-color: #1f232a !important; | ||
1053 | } | ||
1054 | |||
1055 | ._3xpD_, | ||
1056 | ._1qTcI { | ||
1057 | background-color: #282d37 !important; | ||
1058 | } | ||
1059 | |||
1060 | ._269b4 { | ||
1061 | background-color: #323843 !important; | ||
1062 | } | ||
1063 | |||
1064 | ._3B5Ir { | ||
1065 | background-color: #282d37 !important; | ||
1066 | } | ||
1067 | |||
1068 | ._1x3hh { | ||
1069 | box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.25) !important; | ||
1070 | } | ||
1071 | |||
1072 | @keyframes pulse { | ||
1073 | 40% { | ||
1074 | opacity: 0; | ||
1075 | } | ||
1076 | |||
1077 | 80% { | ||
1078 | opacity: 1; | ||
1079 | } | ||
1080 | } | ||